How to control word-spacing in justified text with CSS?

Question

I have 2 blocks of text that are pretty small (just under a paragraph each) and they really look better justified but the problem is that text-align: justify; sometimes adds really large spaces and makes the text somewhat ugly (the opposite effect, obviously).

Is it possible to more finely tune the word spacing with CSS so that this doesn't happen?

Answer 1

CSS TEXT-JUSTIFY

This IE-only property offers a refinement on the “justify” value used in the text-align property. Indeed, the “justify” value must be set for that property for text-justify to have any effect.

text-justify offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.

Example

<p style="text-align: justify; text-justify: newspaper;">
    This is “Newspaper” justified content
</p>

Possible Values

VALUE                   DESCRIPTION
----------------------  ---------------------------------------------------------------------
auto                    The browser will determine the appropriate justification algorithm
                        to use

distribute              Justification is handled similarly to the “newspaper” value,
                        but this version is optimized for East Asian content
                        (especially the Thai language.)
                        In this justification method, the last line is not justified.

distribute-all-lines    Behavior and intent for this value is the same as with the
                        “distribute” value, but the last line is also justified.

inter-cluster           Justifies content that does not have any inter-word spacing
                        (such as with many East Asian languages.)

inter-ideograph         Used for justifying blocks of ideographic content.
                        Justification is achieved by increasing or decreasing spacing
                        between ideographic characters and words as well.

inter-word              Justification is achieved by increasing the spacing between words.
                        It is the quickest method of justification and does not justify
                        the last line of a content block.

newspaper               Spacing between letters and words are increased or decreased
                        as necessary.

The IE reference says “it is the most sophisticated form of justification for Latin alphabets.”

Source: http://www.css3.com/css-text-justify/

Hope this helps!

Answer 2

In addition to using text-justify, which seems to be currently supported by IE only, consider adding hyphenation, with explicit hyphenation hints ­ and/or browser-based automatic hyphenation, using hyphens: auto with due browser prefixes or using JavaScript-based hyphenator like Hyphenator.js. Hyphenation often greatly reduces the need for added spacing in justification.