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-spacingon 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, seetext-align-last. - distribute
-
The browser adjusts (usually increases) spacing between each pair of adjacent characters (effectively varying the used
letter-spacingon 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.
