text-justify Property in CSS

The CSS text-justify property controls how justified text is aligned when text-align is set to justify. It determines the method used to distribute space between words or characters to achieve full justification.

Syntax

selector {
    text-justify: value;
}

Possible Values

Value Description
auto Browser determines the best justification method
inter-word Adjusts spacing between words
inter-character Adjusts spacing between characters
none Disables justification

Example 1: Inter-word Justification

The following example uses inter-word to justify text by adjusting space between words −

<!DOCTYPE html>
<html>
<head>
<style>
    .inter-word-example {
        width: 300px;
        padding: 20px;
        text-align: justify;
        text-justify: inter-word;
        background-color: #f0f0f0;
        border: 2px solid #333;
    }
</style>
</head>
<body>
    <div class="inter-word-example">
        This is a sample paragraph that demonstrates inter-word justification. Notice how the spacing between words is adjusted to make each line fill the entire width of the container.
    </div>
</body>
</html>

A gray bordered box containing justified text where spacing between words is adjusted to align both left and right edges evenly.

Example 2: Inter-character Justification

This example uses inter-character to justify text by adjusting space between individual characters −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 400px;
        margin: 20px;
        background-color: #ffe4b5;
        padding: 15px;
    }
    
    .inter-char {
        text-align: justify;
        text-justify: inter-character;
        background-color: #ffebcd;
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .normal {
        text-align: justify;
        background-color: #fff;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="container">
        <p class="inter-char">Inter-character justification: This text uses character spacing to achieve full justification across the entire width.</p>
        <p class="normal">Normal justification: This text uses the default justification method for comparison purposes.</p>
    </div>
</body>
</html>

Two paragraphs in a peach-colored container. The first paragraph shows inter-character spacing with slightly wider character gaps, while the second shows normal word spacing for comparison.

Conclusion

The text-justify property provides fine control over text justification methods. Use inter-word for standard justification and inter-character for languages that benefit from character-level spacing adjustments.

Updated on: 2026-03-15T13:42:30+05:30

758 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements