CSS Reference Property

text-justify

When using text-align: justify the spacing behavior between words can be defined with the text-justify property.

There are several ways a browser could justify content on a line, like redistributing the white space between words (see word-spacing) or between letters (see letter-spacing), for example, so that the inline content on each line “expands” to fill the whole line from one edge of the container to the other.

The text-justify selects the justification method used when a line’s alignment (text-align) is set to justify (see text-align). Therefore, it only works on text that has text-align: justify set.

Official Syntax

  • Syntax:

    text-justify:  auto | none | inter-word | distribute
                            
  • Initial: auto
  • Applies To: block elements
  • Animatable: no

Values

auto
This is the default value. The browser determines the appropriate justification algorithm to follow, based on a balance between performance and adequate presentation quality.
none
Justification is disabled. This value is intended for use in user style sheets to improve readability or for accessibility purposes.
inter-word
The browser adjusts (usually increases) spacing between words only (effectively varying the used word-spacing on the line). This behavior is typical for languages that separate words using spaces, like English or Korean. It is the fastest of all values. Its behavior does not affect the last line of the paragraph. To justify the last line, see text-align-last.
distribute
The browser adjusts (usually increases) spacing between each pair of adjacent characters (effectively varying the used letter-spacing on the line).
This value is sometimes used in e.g. Japanese.

Notes

The exact justification algorithm is browser-dependent; however, CSS provides some general guidelines.
Other values not yet listed in the specification are also available, all of them currently only work in Internet Explorer. The following table lists these values with a short description of the behavior of each:

distribute-all-lines Like the newspaper value, except that the last line is also justified.
inter-cluster Only content that does not contain any inter-word spacing (such as Asian languages) is justified.
inter-ideograph Justifies content with ideographic text.
kashida Justifies content by elongating characters.
newspaper Spacing between letters and words are increased or decreased.

Source: http://msdn.microsoft.com/en-us/library/ie/ms531172%28v=vs.85%29.aspx

Examples

p {
  text-align: justify;
  text-justify: distribute;
}

p.japanese {
  text-justify: distribute;
}

p.arabic {
    text-justify: kashida;
}
                

Browser Support

This property is currently only supported by Internet Explorer starting from version 8, and it needs the -ms- prefix.

Further Reading

Written by

Last updated December 11, 2016 at 9:43 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.