How to justify a single line of text with css
This trick is called "Ben Justification" *
Well, it's not quite all with css, you need to add a little extra to the end of the line. The markup for the heading above is...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
The little addition at the end of the line triggers the justification of the line by starting a new line. The additional content (<span> </span>) is forced onto a new line because the space is made 1000px wide (with word-spacing) and is treated like a word. The additional line does not display because the fontsize is set to 0px.
Update, 23-Jan-11: I've just updated the markup to include a space after the within the span and setting the font size to 1px for the span: this is needed for IE8. Thanks to Mamoun Gadir for pointing out IE's problems.
The css for the heading above is...
h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}
h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}
* Unless evidence demonstrates that this technique has been published before, I hereby name this technique "Ben Justification" and declare it free for all to use.
Ben Clay, Jan 2010.
