CSS Reference Property

text-justify 6i5l6j

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

There are several ways a browser could justify content on a line, like redistributing the white space between words (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 52n3v

  • Syntax:

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

Values 6u6u2p

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 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 3g6b1p

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 2w2wp

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

p.japanese {
  text-justify: distribute;
}

p.arabic {
    text-justify: kashida;
}
                

Browser 3n3564

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

Further Reading 3k5138

Written by

Last updated June 11, 2020 at 9:43 pm by Mary Lou

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