text-justify

Definition

The text-justify CSS property is used to control the justification or alignment of text within its container when the text spans multiple lines. It specifies how to distribute the space between words and letters to achieve a visually pleasing and balanced appearance.

The text-justify property accepts several values:

• auto: This is the default value. The browser applies the default justification behavior, which may vary between browsers.
• none: No justification is applied, and the text is displayed using the default alignment behavior of the container.
• inter-word: The space between words is adjusted to create even spacing and distribute any extra space evenly between words.
• inter-character: The space between individual characters is adjusted to create even spacing and distribute any extra space evenly between characters.
• distribute: The space between both words and characters is adjusted to create even spacing and distribute any extra space evenly between both.

Here’s an example:

.paragraph {
  text-justify: inter-word;
}

In this example, the .paragraph class sets the text-justify property to inter-word, which justifies the text by adjusting the space between words to achieve even spacing.

It’s important to note that the text-justify property affects the alignment of text within its container only when it spans multiple lines. It doesn’t have any effect on single-line text or text that fits within a single line.

The text-justify property is primarily used for improving the appearance and readability of justified text, where the text is aligned both to the left and right edges of its container. It can be particularly useful for paragraphs or blocks of text in cases where achieving even spacing between words or characters is desirable.

Syntax

.prose {
  text-align: justify;
  text-justify: inter-word;
}

Values

• auto: browser default justification algorithm.
• inter-word: adjust spacing between words (common Latin script approach).
• inter-character: adjust spacing between characters (useful for CJK scripts).
• none: disable custom justification, falling back to default behavior.

Practical Examples

.prose {
  text-align: justify;
  text-justify: inter-word;
}

Tweak justification to reduce rivers of whitespace or support non-Latin scripts.

<div class="grid gap-4 sm:grid-cols-2">
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm leading-relaxed text-slate-700 shadow-sm">Default justified text can introduce uneven spacing, known as rivers, especially in narrow columns.</p>
  <p class="rounded-xl border border-slate-200 bg-white p-4 text-sm leading-relaxed text-slate-700 shadow-sm" style="text-align: justify; text-justify: inter-word; hyphens: auto;">Using <code>text-justify: inter-word</code> alongside hyphenation produces smoother rag edges.</p>
</div>

Tips & Best Practices

• Pair with hyphens: auto to prevent large gaps in justified copy.
• Avoid justification on very narrow columns; consider switching to text-align: left at smaller breakpoints.
• Test with the target language—CJK scripts often prefer inter-character.

Accessibility & UX Notes

Large spacing variations can hinder reading for people with dyslexia; provide a way to disable justification if possible.

Browser Support

Supported in modern browsers, though some ignore the property unless text-align: justify is set.

Related

• hyphens for automatic word breaks.
• word-spacing to fine-tune justified text.
• text-align which activates justification mode.