The CSS text-justify Property

Overview

The text-justify property allows you to control the distribution of extra space between words or individual characters when lines of text are justified through the text-align property set to justify.

Note: The global usage of text-justify is minimal, and most browsers don't fully support it. According to W3C, this property is at risk of being dropped and may not enjoy broad support in the future. Exercise caution when using it in production environments.

Examples and Usage

Below, we'll illustrate the usage of text-justify with values: none, auto, inter-word, and inter-character, using an extract from The Hitchhiker's Guide to the Galaxy. To observe their effects reliably, it's recommended to use Firefox as some browsers have partial support and may require enabling of experimental features. You may also need to adjust your browser size or zoom level to notice the effects clearly.

HTML Structure

<p class="justify-example">He was by no means a great warrior; in fact he was a nervous, worried man. Today he was particularly nervous and worried because something had gone seriously wrong with his job, which was to see that Arthur Dent’s house got cleared out of the way before the day was out.</p>

CSS Styling

.justify-example {
  width: 50%;
  margin: auto;
  text-align: justify;
  text-justify: none;
  /* No extra space is distributed */
}

With text-justify set to none, no extra space is distributed between words or letters. It often results in uneven spaces between words.

Now let's explore the auto value:

.justify-example {
  width: 50%;
  margin: auto;
  text-align: justify;
  text-justify: auto;
  /* Browser decides on space distribution */
}

When set to auto, the browser decides how to distribute extra space. It varies among browsers, and in most cases, it behaves like inter-word.

Next, let's see inter-word in action:

.justify-example {
  width: 50%;
  margin: auto;
  text-align: justify;
  text-justify: inter-word;
  /* Extra space distributed between words */
}

With inter-word, extra space is distributed between words, which is ideal for languages where space is used to separate words.

Lastly, let's examine the inter-character value:

.justify-example {
  width: 50%;
  margin: auto;
  text-align: justify;
  text-justify: inter-character;
  /* Extra space distributed between characters */
}

With inter-character, the extra space is distributed between characters, which is particularly useful for scripts like Japanese.

Values

The text-justify property can accept the following values:

Value	Description
`none`	Justification is turned off, effectively the same as not setting `text-align`.
`auto`	The browser selects the ideal type of justification based on performance, quality, and language appropriateness. The default mode if `text-justify` is not set.
`inter-word`	Extra space is added between words, ideal for languages that use space-separated words like English or Korean.
`inter-character`	Extra space is distributed between characters, beneficial for languages such as Japanese.
`distribute`	Deprecated. Behaves similarly to `inter-character` and is maintained for backwards compatibility.

Associated Properties

text-align
word-spacing
letter-spacing
text-indent
white-space

Tips and Tricks

Due to the limited support and the potential removal of the text-justify property, consider using text-align: justify with a combination of word-spacing and letter-spacing for better control and wider browser compatibility.
The text-justify property could prove useful when dealing with languages that don't use spaces to separate words, such as Japanese. For such languages, inter-character may yield the best results.
The text-justify property only affects the text in a block container element that has been justified by the text-align property. Test your content on different devices and in different browsers to ensure it renders correctly due to the inconsistent support of this property across browsers.
Using text-justify may affect the readability of your text, so always consider your audience and the context of your content before deciding to use it.

Browser Compatibility

The property lacks support by most browsers, and it may require enabling experimental platform features. It's almost fully supported in Firefox. For more specifics, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	No*	No*	No	Yes*	No*	Partial

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.