text-justify

text-justify chooses how extra space is distributed when text-align:justify is active. It has uneven browser support, so the following comparison is an inspection exercise rather than a promise that every browser changes its algorithm.

Compare requested algorithms

Both paragraphs are justified. One requests inter-word and one inter-character. In a browser that ignores text-justify, they may look the same.

<p class="words">
  Practice small examples and compare each change with the original working
  document.
</p>
<p class="characters">
  Practice small examples and compare each change with the original working
  document.
</p>

p {
  max-width: 24ch;
  text-align: justify;
  border: 1px solid #94a3b8;
  padding: 0.75rem;
}
.words {
  text-justify: inter-word;
}
.characters {
  text-justify: inter-character;
}

Keep narrow prose start-aligned

The default start alignment avoids large justification gaps. A wider viewport may enable justification, while text-justify remains an optional enhancement.

<p class="reading">
  A useful lesson explains the layout conditions, shows a working result, and
  gives the reader enough code to reproduce it independently.
</p>

.reading {
  max-width: 36ch;
  text-align: start;
}
@media (min-width: 36rem) {
  .reading {
    text-align: justify;
    text-justify: inter-word;
  }
}

Values and defaults

The initial value is auto and the property is inherited. Auto lets the browser choose an algorithm appropriate to the language. Inter-word adjusts word spacing; inter-character adjusts character spacing. None turns justification off rather than falling back to ordinary justified behavior. Distribute is a deprecated compatibility alias for inter-character.

Common mistakes

Without text-align:justify, this does not activate justification. A final line is normally not stretched like other justified lines. Hyphenation can affect results but needs a correct lang value and available dictionaries. A justified paragraph has aligned edges, not “ragged edges improved by this property.” Check the compatibility table rather than assuming all current engines implement it.

Learn text-align, hyphens, and word-spacing.

Sources and browser support

MDN: text-justify describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.