Each word in the header on its own HTML / CSS line

Question

I have some dynamic names in which design requires each word to be on their own line. Here is the desired view: http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black background for each word)

The problem I need help with is keeping the style higher, having the whole title inside the same tag. I cannot dynamically insert H1 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> 

for something like

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

keeping the same style as in the link above.

Thanks in advance.

Answer 1

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

It looks great in IE9, IE8 and the latest versions of Firefox, Chrome, Safari, Opera; everything is in Windows 7. In IE7, it degrades quite well. On Safari on Mac, it's almost perfect.

This is based on the previous answer. Quote from this answer:

Please note that line-height and padding settings can be very difficult to get.

line-height: 1.83; It looks good, and you can find it by selecting something similar to what you wanted, then using the trial version and error to find something that works in both Chrome and Firefox (they display text on 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

The only way I can do this that I know of is to write some javascript that takes your <h1>oh look ..</h1> stuff and splits it into separate h1 tags.

---

update:

I just thought about the path: http://jsfiddle.net/2LEmF/10/

Basically, you need to move the background color in the main div. Then set the width to h1 to make the text break according to the normal rules for breaking the text. Something like 10px.

I'm not sure what this will do in multiple browsers, since you are essentially giving a size that is small for your H1 ... but that may be exactly what you are looking for.

Answer 3

You can set the width h1 smaller than the width of the smallest word, for example. 10px.

It produces exactly the same result as your example (at least in Chrome and Firefox).

Jsfiddle here .

Answer 4

Here is 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 5

You can search and replace spaces with <br /> to get this view:

http://jsfiddle.net/WwbUL/

Answer 6

I'm not sure I understand the problem. It seems like you are stuck in HTML as indicated in your question, but do you want it to appear in a string?

How about adding display:inline; in .tagline?

http://jsfiddle.net/XmCLd/

Or is it the other way around? What is your normal HTML, but you need to split your lines into spaces?

http://jsfiddle.net/GQ44u/

Answer 7

Make the tagline tag really thin and make it block instead of inline . Then do 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.