Cross-browser CSS: Justify last line of text in a paragraph

Great easy way to justify text.
If you want to justify just a single line use this:

h2 {
height: 40px; /* Specifying the height and line-height prevents */
line-height: 40px; /* extra space from being added to the bottom. */
text-align: justify;
text-align-last: justify; /* Internet Explorer 6+ */
}

h2:after { /* All other browsers */
content: “.”;
display: inline-block;
width: 100%;
height: 0;
visibility: hidden;
}

CSS Web Design

Normally if you use CSS to justify text, the last line of text is aligned left rather than justified as on other lines. This is the desired behavior in most instances but for some layouts you may want to justify the last line as text as well. Following is a cross-browser method you can use which will work in IE6+ in addition to popular modern browsers. (This method is also useful if you want to justify just one line of text such as in a heading.)

Tested in IE6, IE7, IE8, FF, Safari, Chrome

Regular Justified Text vs. Text Using This Method:

CSS:

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

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

A paragraph tag (p) and a header (h1) are used above just as examples. You can substitute any block level html elements instead such as a div.

See it…

View original post 83 more words