CSS text-justify Property

What You’ll Learn

The text-justify property controls how justified text spreads extra space — between words or between characters.

Introduction

The text-justify property in CSS is used to specify the justification method for text when the text-align property is set to justify.

This property determines how the browser should distribute space between words and characters to align text evenly along both the left and right margins.

Definition and Usage

Use text-justify when you already have text-align: justify; and want finer control over how the browser fills each line. It is especially helpful for multilingual layouts and typography-heavy pages.

📝 Syntax

The syntax for the text-justify property is straightforward. It is applied to block-level elements containing text:

element {
  text-justify: value;
}

Here, value can be one of the predefined keywords specifying the justification method.

Basic Example

p {
  text-align: justify;
  text-justify: inter-word;
}

Syntax Rules

• text-justify only matters when text-align is set to justify.
• Use inter-word for most Western language paragraphs.
• Use inter-character for East Asian languages or dense character layouts.
• The property is inherited, so parent values can affect child blocks.

Related Properties

• text-align — sets left, center, right, or justify alignment
• word-spacing — manually adjusts space between words
• letter-spacing — manually adjusts space between characters

🎯 Default Value

The default value of the text-justify property is auto, which means the browser uses its default justification algorithm.

💎 Property Values

The text-justify property accepts keyword values that control spacing strategy.

When to Use text-justify

text-justify helps when justified text needs better spacing control:

• News and articles — Use inter-word for clean paragraph justification.
• East Asian content — Use inter-character when word boundaries are less useful.
• Multilingual sites — Match justification method to each language section.
• Print-like layouts — Fine-tune how lines stretch to both margins.

Examples Gallery

In this example, we’ll demonstrate the different values of the text-justify property.

<style>
  .auto {
    text-align: justify;
    text-justify: auto;
  }
  .inter-word {
    text-align: justify;
    text-justify: inter-word;
  }
  .inter-character {
    text-align: justify;
    text-justify: inter-character;
  }
</style>

<h1>Text Justification Examples</h1>
<h2>Auto</h2>
<p class="auto">...</p>
<h2>Inter-Word</h2>
<p class="inter-word">...</p>
<h2>Inter-Character</h2>
<p class="inter-character">...</p>

.article-body p {
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.7;
}

.jp-block {
  text-align: justify;
  text-justify: inter-character;
}

.news-column p {
  text-align: justify;
  text-justify: auto;
}

♿ Accessibility

• Use justification carefully — Fully justified text can create uneven word gaps that are harder to read.
• Prefer left alignment for body copy — Many accessibility guides recommend against justified paragraphs for long reading.
• Watch line length — Justified text in very wide or very narrow columns can look uneven.
• Test with real content — Short demo paragraphs may not reveal spacing problems visible in long articles.

text-justify with text-align

text-justify never replaces text-align. Set alignment to justify first, then choose how space should be distributed.

.legal-copy {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

💡 Best Practices