CSS text-justify Property

Definition and Usage

The text-justify property sets how justification works when text-align: justify is set. It chooses whether extra space goes mainly between words or between characters.

It is inherited. The initial value is auto. Without text-align: justify, this property has no visible effect.

CSS Syntax

Always pair it with text-align: justify. Language-tag your content for better auto results.

Property Values

How to Use text-justify

Justify the text first, then choose the spacing method.

1. Set text-align: justify on the block.
2. Choose inter-word for space-separated languages, or inter-character for character-based scripts.
3. Leave auto when you want the browser to decide.
4. Tag the language with lang so auto can pick better rules.

Live Preview

The sample is already justified. Change the method and compare spacing. In unsupported browsers, values may look the same.

CSS Examples

Each snippet focuses on text-justify and includes text-align: justify so the method can apply. Use Try It Yourself for a live editor.

<style>
  p {
    text-align: justify;
    text-justify: inter-word;
  }
</style>

<p>An example of justified English text used to compare spacing methods for the text-justify property.</p>

<style>
  p {
    text-align: justify;
    text-justify: inter-character;
  }
</style>

<p lang="ja">これは文字間のスペースを調整して行を揃える例です。</p>

<style>
  p {
    text-align: justify;
    text-justify: none;
  }
</style>

<p>Justification opportunities are turned off for this paragraph.</p>

Key Takeaways