CSS text-justify Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The text-justify CSS property controls how text is justified or aligned within a block container, particularly when dealing with non-Latin scripts or languages with complex character shapes. It determines how the space between words and characters is distributed to achieve a balanced and visually pleasing layout. This property is especially useful for maintaining proper spacing and legibility in languages like Arabic, where characters may have different shapes and alignment requirements. By using values such as "auto" or "inter-word," web designers can ensure that text is justified appropriately for different languages and scripts, improving the overall readability and aesthetic quality of the content.

Initial value: auto
Applies to: block containers and, optionally, inline elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.textJustify

Syntax

text-justify: auto | none | inter-word | distribute

Values

autoAllows the browser to determine which justification algorithm to apply.
noneJustification is disabled.
inter-wordJustification adjusts spacing at word separators only (effectively varying the used word-spacing on the line). This behavior is typical for languages that separate words using spaces, like English or Korean.
inter-characterText is justified by adjusting the space between characters, maintaining consistent word spacing. This can result in irregular word spacing but even character spacing.
distribute DeprecatedJustification adjusts spacing between each pair of adjacent characters (effectively varying the used letter-spacing on the line). This value is sometimes used in Japanese.

Example

HTML

<p class="none">

  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur

  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id

  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat

  justo id, feugiat leo. Cras eu elementum dui.

</p>

<p class="auto">

  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur

  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id

  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat

  justo id, feugiat leo. Cras eu elementum dui.

</p>

<p class="dist">

  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,

  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,

  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,

  consequat justo id, feugiat leo. Cras eu elementum dui.

</p>

<p class="word">

  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,

  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,

  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,

  consequat justo id, feugiat leo. Cras eu elementum dui.

</p>

<p class="char">

  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,

  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,

  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,

  consequat justo id, feugiat leo. Cras eu elementum dui.

</p>

CSS

p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

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

.char {
  text-justify: inter-character;
}

Result

Editor