How can this effect (line breaks) be achieved with CSS and/or Javascript

Problem

Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?

Current Code :

<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple &lt;h2&gt; tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

Expected Code

<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.

And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.

How did you guys get around this?

How can i achieve this effect using a single heading/any tag and with css

Problem courtesy of: Random User

Solution

one, of the tons of solutions

<h2 class="heading">
    <span>Hi guys, How can i achieve this effect using just a single</span>
    <span>line of text and css. Right now i am using</span>
    <span>multiple &lt;h2&gt; tags and a css class to achieve this effect.</span>
    <span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
    <span class="clear"></span>
</h2>

with this styles in <head>

<style type="text/css">
    h2.heading {
        background:#0f0;
        padding:2px;
        float:left;
    }

    h2.heading span {
        clear:left;
        display:block;
        float:left;
        background:#fff;
        padding:1px;
        margin:1px;
    }

    h2.heading .clear {
        clear:left;
        margin:0px;
        padding:0px;
        float:none;
    }
</style>

EDIT: second variant

<style type="text/css">
    h2.heading {
        background:#0f0;
        padding:2px;
        display:inline-block;
        font-size:20px;
    }

    h2.heading span {
        background:#fff;
        padding:1px;
        margin:1px;
        line-height:30px;
    }
</style>

with this markup

<div style="width:300px;">
    <h2 class="heading">
        <span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
    </h2>
</div>
Solution courtesy of: bukart

Discussion

No need of CSS or JavaScript, just use the <br> tag.

<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br> 
line of text and css. Right now i am using 
<br>
multiple &lt;h2&gt; tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>

Or did I misunderstand the question?

Discussion courtesy of: Alexis Pigeon

I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)

HTML:

<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

Same as your HTML except that I used a span instead of h2

And css:

.heading {
        background: white;
        line-height:2em;
        padding: 0.3em;;
    }

    body { /*not really neccessary to show, but anyway*/
        background: limegreen;
        font-family: verdana;
        color: #999999}

Problem with that is that there are no paddings to the left and right of the text. And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.

Discussion courtesy of: Alfred Larsson

This recipe can be found in it's original form on Stack Over Flow.