CSS Text-Justify Enhance Text Alignment

Introduction

The text-justify CSS property controls how text is justified when text-align: justify; is applied. Justification spreads text evenly across the available space, making it more visually appealing. This property is useful for web design to enhance readability and aesthetics.

Specification

The text-justify property is defined in the CSS Text Module Level 3. You can find the official documentation in the CSS Text Module Level 3 under the section for the text-justify property.

Syntax

Here’s how to use the text-justify property in CSS:

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Deprecated value */

/* Global values */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

Values

• none: Turns off text justification.
• auto: The browser chooses the best justification method.
• inter-word: Justifies text by adjusting spaces between words.
• inter-character: Justifies text by adjusting spaces between characters.
• distribute: Deprecated, behaves like inter-character.

Global values include:

• inherit: Inherits the text-justify value from the parent element.
• initial: Sets the property to its default value.
• revert: Reverts to the user agent’s default stylesheet value.
• revert-layer: Reverts to the value for the current cascade layer.
• unset: Resets the property to its initial or inherited value.

Formal Definition

• Initial Value: auto
• Applies To: Inline-level and table-cell elements
• Inherited: Yes
• Computed Value: As specified
• Animation Type: Discrete

Examples

Simple Example

Here’s a simple example to demonstrate the different values of text-justify:

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

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;
}

Example with Interactive Buttons

<button onclick="changeJustify('none')">None</button>
<button onclick="changeJustify('auto')">Auto</button>
<button onclick="changeJustify('inter-word')">Inter-Word</button>
<button onclick="changeJustify('inter-character')">Inter-Character</button>

<div id="justify-example" class="justify-example">
  Vincent van Gogh is one of the most well-known post-impressionist painters.
</div>

<script>
  function changeJustify(value) {
    document.getElementById('justify-example').style.textJustify = value;
  }
</script>

<style>
  .justify-example {
    width: 250px;
    padding: 15px;
    border: 2px solid orangered;
    text-align: justify;
    text-justify: inter-word;
  }
</style>

Browser Compatibility

• Chrome: Full support.
• Firefox: Supported from version 55.0.
• Internet Explorer/Edge: Supported from IE 11.0.
• Opera: Full support.
• Safari: Supported from version 10.0.3.

See Also

For more information, check out:

• [text-align]WebsiteUrl
• [text-indent]WebsiteUrl
• [text-overflow]WebsiteUrl
• [HTML Reference Guide]WebsiteUrl

These resources will help you understand text formatting and alignment in web development, making your web pages more polished and professional.