CSS text-justify Property

The text-justify property in CSS controls how text is spaced when text-align: justify is used. It adjusts the space between words or characters to make the text fill the full width of the line. Common options include auto, inter-word, inter-character, and none for better text formatting.

Syntax

text-justify: auto | inter-word | inter-character | none:initial | inherit;

Property Values

The text-justify property values are listed below:

Example of CSS text-justify Property

Here are a few examples of how the text-justify property is used to adjust text spacing:

Example 1: Using CSS auto property

In this example, we demonstrate the text-justify: auto; property, allowing the browser to determine the best text justification method for the text content within the specified container.

Output:

👁 Image

Example 2: Using CSS inter-word property

In this example we are use the text-justify: inter-word; property, which justifies text by adjusting spacing between individual words in the specified container.

Output:

👁 Image

Example 3: Using CSS inter-character property

In this example we are using text-justify: inter-character; property, which justifies text by adjusting spacing between individual characters within the specified container.

Output:

👁 Image

Example 4: Using CSS none property

This example disables text justification methods using text-justify: none;, keeping text aligned left despite justification settings applied in the .none class.

Output:

Supported Browsers

The browser supported by text-justify property are listed below:

• Google Chrome 5.0
• Edge 12
• Mozilla 4.0
• Safari 5.0
• Opera 11.1