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.

score 3 · Accepted Answer · edited May 23 '17 at 12:18

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;
}

score 2 · Answer 2 · answered Mar 09 '18 at 20:13

2

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;
}

answered Mar 09 '18 at 20:13

ZenoArrow

697
7
21

NotMe · Answer 3 · 2012-02-07T05:14:21.537

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.

edited Feb 07 '12 at 05:14

answered Feb 07 '12 at 04:59

NotMe

87,343
27
171
245

Thanks. I was afraid of that. I'll see if anyone else has a solution before I go that route though. – Alan Weibel Feb 07 '12 at 05:08
Unfortunately, I need the background to be the same width as each word as in the original example. – Alan Weibel Feb 07 '12 at 05:17
2

@AlanWeibel: That isn't possible without JS. +1 for a JS solution. – Blender Feb 07 '12 at 05:19
Yeah, I guess you are back to javascript then. – NotMe Feb 07 '12 at 15:07
@Blender: It's possible as shown in my answer, though it's not as robust as one would hope. – thirtydot Feb 07 '12 at 18:05

score 1 · Answer 4 · answered Feb 07 '12 at 05:17

1

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.

answered Feb 07 '12 at 05:17

magicalex

917
7
11

Thanks but this solution does fake a line-break, but it does not keep the background styles as in the example. – Alan Weibel Feb 07 '12 at 05:23
I know it's not exactly what you're looking for, but I've managed to shoehorn a background in using the `:before` pseudo element. you can see the [jsfiddle here](http://jsfiddle.net/TttLX/). – magicalex Feb 07 '12 at 06:24

score 0 · Answer 5 · answered Feb 07 '12 at 05:07

0

You could search and replace spaces with <br /> to get this look:

http://jsfiddle.net/WwbUL/

answered Feb 07 '12 at 05:07

Steve Wellens

20,506
2
28
69

This solution does not solve my problem. It's the same as the example but with
after each word instead of
tags.I need the final output to look like it is in the example link, but I cannot insert any html tags before and after each word.
– Alan Weibel Feb 07 '12 at 05:11

ghoti · Answer 6 · 2012-02-07T05:13:16.150

0

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/

edited Feb 07 '12 at 05:13

answered Feb 07 '12 at 05:07

ghoti

45,319
8
65
104

I need the final output to look like it is in the example link, but I cannot insert any html tags before and after each word. – Alan Weibel Feb 07 '12 at 05:10
Thanks but this solution does fake a line-break, but it does not keep the background styles as in the example. – Alan Weibel Feb 07 '12 at 05:24
I didn't feel inclined to clone your styles; if the faking works, you can write your own styles. That way, the person doing the work knows *precisely* what you want. – ghoti Feb 07 '12 at 05:42
The whole point of this issue revolves around the styles. Thanks for your suggestion anyway. – Alan Weibel Feb 07 '12 at 06:46

score 0 · Answer 7 · answered Feb 07 '12 at 05:21

0

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.

answered Feb 07 '12 at 05:21

jhsowter

619
3
8

Thanks but this solution does fake a line-break, but it does not keep the background styles as in the example. Your solution does not keep the desired padding. – Alan Weibel Feb 07 '12 at 05:24

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

7 Answers7

tags.I need the final output to look like it is in the example link, but I cannot insert any html tags before and after each word.