The text-justify
property defines the spacing behaviour that should be applied to the text which is justified, i.e., when the text-align property is set to justify
.
CSS
text-justify: value;
Values
auto
: Browser defines the justification method. This is the default value.
none
: Disables justification.
inter-word
: Distributes the extra white space between words by increasing or decreasing the space between the words. It has no effect on the last line of the element.
inter-character
: Distributes the extra white space between characters by increasing or decreasing the space between the charcaters. It has no effect on the last line of the element.
distribute
: Shows the same behaviour as inter-character
. It is a deprecated value.
initial
: Sets the default value.
inherit
: Inherits the value from parent element.
Example
Look at how these values affect the text justification in paragraphs.
HTML
<p id="para1">
<span>text-justify: auto</span>
<br/><br/>
Lorem ipsum ... porta tempor.</p>
<p id="para1">
<span>text-justify: none</span>
<br/><br/>
Lorem ipsum ... porta tempor.</p>
<p id="para3">
<span>text-justify: inter-word</span>
<br/><br/>
Lorem ipsum ... porta tempor.</p>
<p id="para4">
<span>text-justify: inter-character</span>
<br/><br/>
Lorem ipsum ... porta tempor.</p>
CSS
p {
width: 85%;
border: solid 2px;
text-align: justify;
}
span {
font-weight: 700;
}
#para1 {
text-justify: auto;
}
#para2 {
text-justify: none;
}
#para3 {
text-justify: inter-word;
}
#para4 {
text-justify: inter-character;
}
See the Pen CSS text-justify example by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is currently not supported by many browsers. IE supports the value inter-word
and distribute
. Chrome supports the values inter-word
and distribute
behind the "Experimental Web Platform Features" flag. Firefox partially supports the property.