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

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.

Answer 3

Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}

Answer 4

You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.

Answer 5

You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/

Answer 6

I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/

Answer 7

Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.