Justify a Headline With CSS

How to do it with only a div, an H1, and a span.

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…

How to Justify a Headline With CSS Tweak a single line into justifying

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:

HT: Ben Clay via Jennifer Kyrnin

Comment? Sure!

Above all, love God!
%d bloggers like this: