Justify the last line of a div?

Question

I don't think the "why?" of this question is important...but what I need to do is to text-align:justify the last line of text from a DIV. Normally, the last line (or the first if there are no other lines, which is the current case) of a div isn't justified, but aligned left. I know it might not make sense at all, but I absolutely need the last line to be justified!

Answer 1

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/

Answer 2

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.