CSS Cookbook, 2nd Edition

Problem

You want to align text to be justified on both the left and right sides, as in Figure 2-7.

Solution

Use the text-align property:

P { width: 600px; text-align: justify; }

Discussion

How well does web-based text justification work? According to the CSS 2.1 specification, it depends on the algorithms developed by the engineers who made the browser being used to view the web page. Because there isn't an agreed-upon algorithm for justifying text, the look of the text varies from browser to browser, even though the browser vendor technically supports justification.

Browser support for the property is good in Internet Explorer 4+ for Windows, Internet Explorer 5 for Macintosh, Safari, and Opera 3+. In those browsers, justified text looks pleasing to the eye. In other browsers, justified text may look bad; for example, it may have a lot of whitespace between words.

See Also

The CSS 2.1 specification about the text-align property at http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop.