Justify the last line of a div?

Here's a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

More details: http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

This is the cleanest hack I could come up with/find. Your mileage may vary.

I tested my example in IE8, Firefox, Chrome, Opera, Safari.

IE7 does not implement the :after pseudo-class, so it won't work there.

If you need IE7 support, it would probably work to stick the " ___" inside an extraneous span at the end of the div (use JS?).

Live Demo (see code)

CSS:

div {
    width: 618px;        
    text-align: justify
}
div:after {
    content: " __________________________________________________________";
    line-height: 0;
    visibility: hidden
}

HTML:

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>

Unfortunately, it seems to make the div a line taller than it needs to be.

This method worked for me:

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> &nbsp;</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.

Source: http://www.evolutioncomputing.co.uk/technical-1001.html

CSS3 offers a solution for this in the form of text-align-last, see http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

Let's say I'm working with divs that "for some reason" (there is one pretty good reason) can only have one line....and I want to justify them.

Why don't you use text-align: justify;? ~~It does justify every line. Even if there is just one line.~~

Edit: I think you are looking for this, as scragz said. Anyway, this works only in IE 5.5 and IE 6.

Justify the last line of a div?

Related

Recent Posts