The text-justify property is used to specify spacing between words, or the justification method, when the text-align property is set to ‘justify’.

Syntax:

selector {

     text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim | none | initial | inherit;

}

Values:

The text-justify values explained:

  • auto; Browser defines how to justify text.
  • inter-word; Increases or decreases the space between words.
  • inter-ideograph; Justifies content with ideographic text (used for blocks of ideographic content).
  • inter-cluster; Used mostly for Asian languages because it justifies only content that doesn’t contain any inter-word spacing.
  • distribute; Increases or decreases spaces between words (optimized for east Asian languages).
  • kashida; Elongates characters to justify.
  • trim; Trims the text.
  • newspaper; Increases or decreases spaces between letter and words.
  • none; Ignores the property.
  • initial (default value), inherit
NOTE: This property at the moment of writing tutorial is not well supported by browsers.

Example

Example of text-justify property:

​x
 
<!DOCTYPE html>
<html>
<head><style type="text/css">
p {
    text-align: justify;
    text-justify: newspaper;
        -webkit-text-justify: newspaper;
}
</style></head>
​
<body>
​
<p>Although we are going to discuss the CSS3 and its properties in details further in tutorial, it is worth mentioning the main and most significant differences between those two languages, and what improvements have CSS3 introduced in comparison to CSS2.</p>
​
</body>
</html>

 

›› go to examples ››