CSS3 Text-Justify Property

The text-justify property specifies the justification method to use when text-align is set to "justify". This property specifies how justified text should be aligned and spaced. The syntax for text-justify property is:

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim|initial|inherit;

Below, you can try to see how CSS3 justification changes the spacing between words. (it's pretty hard to see the differences). Tip: Resizing the browser window may help:

HTML file: Displayed by browser:
<style>
div#ex1 {
    text-align: justify;
    text-justify: auto;
}
div#ex2 {
    text-align: justify;
    text-justify: inter-word;
}
div#ex3 {
    text-align: justify;
    text-justify: inter-ideograph;
}
div#ex4 {
    text-align: justify;
    text-justify: inter-cluster;
}
div#ex5 {
    text-align: justify;
    text-justify: distribute;
}
div#ex6 {
    text-align: justify;
    text-justify: kashida;
}
div#ex7 {
    text-align: justify;
    text-justify: trim;
}
div#ex8 {
    text-align: justify;
    text-justify: initial;
}
div#ex9 {
    text-align: justify;
    text-justify: inherit;
}
div#ex10 {
    text-align: none;
    text-justify: none;
}
</style>
<body>
<h3>Text-justify: auto; (justification algorithm is determined by browser)</h3>

<div id="ex1">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: inter-word; (increases/decreases the space between words)</h3>

<div id="ex2">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: inter-ideograph; (justifies content with ideographic text)</h3>

<div id="ex3">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: inter-cluster; (content not containing any inter-word spacing -- like Asian languages -- is justified)</h3>

<div id="ex4">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: distribute; (spacing between letters & words are increased or decreased as necessary)</h3>

<div id="ex5">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: kashida; (justifies content by elongating characters)</h3>

<div id="ex6">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: trim; (not sure how this works)</h3>

<div id="ex7">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: initial; (sets this property to its default value)</h3>

<div id="ex8">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify: inherit; (inherits this property from its parent element)</h3>

<div id="ex9">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>

<h3>Text-justify:none; (justification is disabled -- with text-align:none; too)</h3>

<div id="ex10">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</div>
</body>

Text-justify: auto; (justification algorithm is determined by browser)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: inter-word; (increases/decreases the space between words)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: inter-ideograph; (justifies content with ideographic text)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: inter-cluster; (content not containing any inter-word spacing -- like Asian languages -- is justified)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: distribute; (spacing between letters & words are increased or decreased as necessary)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: kashida; (justifies content by elongating characters)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: trim; (not sure how this works)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: initial; (sets this property to its default value)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify: inherit; (inherits this property from its parent element)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Text-justify:none; (justification is disabled -- with text-align:none; too)

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Note: The text-justify property only works in Internet Explorer.

Back button Table of Contents Next button