CSS - text-justify Property

Quiz

CSS text-justify property specifies the justification method you should use when the text-align property is set to justify. It controls how spaces are distributed between words and characters to align text evenly across a line.

Syntax

The syntax for the text-justify property is as follows:

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

Property Values

CSS text-justify property accepts the following values:

Value	Description
auto	The default value of browser is applied.
none	It disables the justification method.
inter-word	It adjusts the space between words.
inter-character	It adjusts the space between individual characters.
distribute	It applies even space to words and characters.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Using inter-word Value

To adjust the space between individual words, we can use inter-word value with text-justify property.

Example

In this example, the text-justify property is set to inter-word, so only spaces between words are adjusted.

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

<head>
    <title>CSS text-justify Property</title>
    <style>
        .justify-text {
            text-align: justify;
            text-justify: inter-word;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h2>CSS text-justify Property Example</h2>
    <p class="justify-text">
        This is an example of CSS text-justify property using inter-word value. Spacing is adjusted between individual words.
    </p>
</body>

</html>

Using inter-character Value

To adjust the space between individual characters, we use inter-character value with text-justify property.

Example

In this example, the text-justify property is set to inter-character, so only spaces between characters are adjusted.

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

<head>
    <title>CSS text-justify Property</title>
    <style>
        .justify-character {
            text-align: justify;
            text-justify: inter-character;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h2>CSS text-justify Property Example</h2>
    <p class="justify-character">
        This is an example of CSS text-justify property using inter-character value. Spacing is adjusted between individual characters.
    </p>
</body>

</html>

Using distribute Value

To adjust the space between individual words and characters, we use distribute value with text-justify property.

Example

In this example, the text-justify property is set to distribute, so spaces between words and characters are adjusted equally.

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

<head>
    <title>CSS text-justify Property</title>
    <style>
        .justify-distribute {
            text-align: justify;
            text-justify: distribute;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h2>CSS text-justify Property Example</h2>
    <p class="justify-distribute">
        This is an example of CSS text-justify property using distribute. Spacing is adjusted between words and characters.
    </p>
</body>

</html>

Note: The text-justify property is not supported in many browsers. Try running the codes in Firefox to see the effects of the property values.

Supported Browsers

Property
text-justify	No	NO	55	No	NO

Print Page