CSS text-justify

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.