CSS text-justify Property

Last Updated : 16 Oct, 2024

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:

Value	Description
auto	Allows the browser to determine the best justification property for the given text.
inter-word	Justifies text by adjusting the spacing between individual words in the text.
inter-character	Justifies text by adjusting the spacing between individual characters in the text.
none	Disables any justification methods used in the text.

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.

html

<!DOCTYPE html>
<html>

<head>
    <title>text-justify property</title>
    <style>
        #main {
            border: 1px solid green;
            padding-bottom: 6px;
        }

        #text-justify-container {
            text-align: justify;
            text-justify: auto;
        }

        h1,
        h2,
        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <div id="main">

        <h3>text-justify: auto;</h3>

        <!-- text-justify property used here -->
        <div id="text-justify-container">
            HTML stands for Hyper Text Markup Language.
            It is used to design web pages using a markup
            language. HTML is the combination of Hypertext
            and Markup language.
        </div>
    </div>
</body>

</html>

Output:

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.

html

<!DOCTYPE html>
<html>

<head>
    <title>text-justify property</title>
    <style>
        #main {
            border: 1px solid green;
            padding-bottom: 6px;
        }

        #text-justify-container {
            text-align: justify;
            text-justify: inter-word;
        }

        h1,
        h2,
        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <div id="main">

        <h3>text-justify: inter-word;</h3>

        <!-- text-justify property used here -->
        <div id="text-justify-container">
            HTML stands for Hyper Text Markup Language.
            It is used to design web pages using a markup
            language. HTML is the combination of Hypertext
            and Markup language.
        </div>
    </div>
</body>

</html>

Output:

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.

html

<!DOCTYPE html>
<html>

<head>
    <title>text-justify property</title>
    <style>
        #main {
            border: 1px solid green;
            padding-bottom: 6px;
        }

        #text-justify-container {
            text-align: justify;
            text-justify: inter-character;
        }

        h1,
        h2,
        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <div id="main">

        <h3>text-justify: inter-character;</h3>

        <!-- text-justify property used here -->
        <div id="text-justify-container">
            HTML stands for Hyper Text Markup Language.
            It is used to design web pages using a markup
            language. HTML is the combination of Hypertext
            and Markup language.
        </div>
    </div>
</body>

</html>

Output:

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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Text Justify None </title>
    <style>
        .text-justify-container {
            text-align: justify;
            text-justify: none;
        }
    </style>
</head>

<body>
    <h2>Text Justify None</h2>
    <p class="text-justify-container">
        This is an example of text justification
        with the none value. The justification
        methods are disabled.
    </p>
</body>

</html>

Output:

CSS text-justify Property Example 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

CSS text-overflow Property

suptotthitamajumdar

Improve

Article Tags :

CSS text-justify Property

Syntax

Property Values

Example of CSS text-justify Property

Example 1: Using CSS auto property

Example 2: Using CSS inter-word property

Example 3: Using CSS inter-character property

Example 4: Using CSS none property

Supported Browsers

Similar Reads

Thank You!

What kind of Experience do you want to share?