So you want your headline to run the width of the body text.
That seems easy enough to do. Just use the text-align:justify CSS property on your H1. Like this, for instance:
How to Justify a Headline With CSS
Ooooops! 😯 What went wrong?!?! 😥
Well, justification is used for multiple lines of text…with the last line being left-justified rather than stretched out like the others.
A headline is…well…a single line. And it gets the same treatment as the last line of a block of text. Thus, no justification.
So what to do to achieve a fully-justified headline?
Ben Clay came up with a slick solution he christened Ben Justification. I have tinkered with Ben’s work plus expanded it with a little SEO bonus.
First, here’s the CSS:
div.headline {
height: 30px;
display: block;
overflow: hidden;
}
h1.headline {
font-size: 20px;
text-align: justify;
width: 100%;
display: block;
}
span.headline {
font-size: 1px;
word-spacing: 1000px;
}
And then the HTML:
<div class="headline"> <h1 class="headline"> How to Justify a Headline With CSS <span class="headline"> Tweak a single line into justifying </span> </h1> </div>
Will it work this time? Well, let’s take out the line breaks in the above HTML so that’s all run together and we’ll see…
It worked!
Besides allowing you to justify a single line of text (such as a headline), this includes a browser-hidden-but-seo-visible line (or more?) that says, in this case, “Tweak a single line into justifying”!
And all it takes to achieve this SEO-enhanced headline justification is only a div, an h1, and a span.
I call this Ben Justification, Markified.
Pretty catchy, eh? 🙄
Confession: I only tested this in Firefox 6.0.2 and IE 7.
Additional reading on the subject of CSS:
- CSS and Documents
- HTML and CSS: Design and Build Websites
- CSS3: The Missing Manual
- Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics
HT: Ben Clay via Jennifer Kyrnin