Uncategorized

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s