Each word in a title on their own line HTML/CSS

Question

I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look: http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)

The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.

I need to change the HTML markup from

<div class="tagline">
<h1>
    Oh
</h1>
<h1>
    Look
</h1>
<h1>
    A
</h1>
<h1>
    Headline
</h1>
<h1>
    Thanks
</h1>
</div>

to something similar to

<div class="tagline">
    <h1>
        Oh Look A Headline Thanks
    </h1>
</div>

while keeping the same style as in the link above.

Thanks in advance.

Answer 1

See: http://jsfiddle.net/thirtydot/HksP2/

It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.

This is based off a previous answer. Quoting myself from that answer:

Note that the line-height and padding adjustments can be very tricky to get right.

line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).

HTML:

<div class="tagline">
    <h1><span>
        Oh Look A Headline Thanks
    </span></h1>
</div>

CSS:

.tagline {
    display: inline-block;
    width: 0;
    line-height: 1.83; 
    padding: 1px 0; 
    border-left: 20px solid #000;
}
.tagline h1 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background: #000;
    display: inline;
    padding: 8px 0;
    text-transform: uppercase;
}
.tagline span { 
    position: relative;
    left: -10px;
}

Answer 2

Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.

---

update:

I just thought of a way: http://jsfiddle.net/2LEmF/10/

Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.

I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.