text-justify
When justification is on via text-align: justify, this decides where the leftover space goes. tjw suits Western text, tjc suits CJK text.
Class List
| Class | CSS | Description |
|---|---|---|
tja | text-justify: auto | Browser auto-detection (default) |
tjn | text-justify: none | Disable justification |
tjw | text-justify: inter-word | Justify by inter-word spacing |
tjc | text-justify: inter-character | Justify by inter-character spacing |
Live Demo
All four paragraphs use the same sentence at the same width. Watch whether the right edge lines up, and what got stretched to pay for it. Only the first paragraph lacks taj.
left, not justified
Justifying a paragraph means the leftover space on each line has to be pushed somewhere so the right edge lines up. All this property decides is whether that space goes between the words or between the characters.
The right edge is ragged. This is the default.
justify + inter-word — taj tjw
Justifying a paragraph means the leftover space on each line has to be pushed somewhere so the right edge lines up. All this property decides is whether that space goes between the words or between the characters.
Word gaps stretch so the right edge lines up.
justify + inter-character — taj tjc
Justifying a paragraph means the leftover space on each line has to be pushed somewhere so the right edge lines up. All this property decides is whether that space goes between the words or between the characters.
Gaps open between characters too, so tracking visibly widens.
justify + none — taj tjn
Justifying a paragraph means the leftover space on each line has to be pushed somewhere so the right edge lines up. All this property decides is whether that space goes between the words or between the characters.
Justification is on but no adjustment is made, so it reads like left aligned.
<!-- text-justify does nothing without text-align: justify -->
<p class="taj tjw">...</p>
<p class="taj tjc">...</p>
<p class="taj tjn">...</p>Class Details
tjatext-justify: auto
The default. The browser inspects the language and script and picks a strategy for you. On multilingual screens where you cannot predict the script, this is the safest value.
<!-- Let the browser pick the strategy for the script in use -->
<p class="taj tja maxw60rem lh1-8">
Multi-language content where you do not control the script.
</p>tjwtext-justify: inter-word
Stretches only the spaces between words, leaving glyphs and tracking untouched. This is the natural choice for Latin body copy. In narrow columns full of long words, though, the gaps can grow wide enough to form vertical rivers of white.
<!-- Latin body copy: stretch the spaces, never the words -->
<p class="taj tjw maxw60rem lh1-8">
Justified English paragraph with even word spacing.
</p>tjctext-justify: inter-character
Distributes the space between characters as well. This is what CJK text needs, since it has no word boundaries to stretch. Applied to Latin text it produces awkward, loose tracking.
<!-- CJK body copy: distribute space between characters -->
<p class="taj tjc maxw60rem lh1-8">
Justified CJK paragraph where the gaps between glyphs are tuned.
</p>It used to be called distribute
Older documents and some engines expose the same behavior under the name distribute. The standard name is inter-character.
tjntext-justify: none
Keeps justification switched on but disables the spacing adjustment. Useful to opt one block out of a shared style that justifies everything.
<!-- Opt out of justification while keeping text-align: justify -->
<p class="taj tjn maxw60rem lh1-8">
The last line and the ragged edge stay as the browser laid them out.
</p>Practical Example
Used with taj (text-align: justify).
<!-- Western text: word gap justification -->
<p class="taj tjw">
This is a long paragraph of English text that will be
justified by adjusting the spacing between words.
</p>
<!-- CJK text: character gap justification -->
<p class="taj tjc">
This is justified text where the gaps between characters
are adjusted for alignment.
</p>Multi-column feature layouts and dense legal blocks are the classic use cases.
<!-- Two-column magazine layout: justified columns with hyphenation
so the extra word spacing never opens up rivers of white -->
<article class="cw28rem cg4rem">
<p class="taj tjw fs16px lh1-8 c71717A mb2rem">
... first paragraph of the feature ...
</p>
<p class="taj tjw fs16px lh1-8 c71717A mb2rem">
... second paragraph of the feature ...
</p>
</article>
<!-- Terms and conditions block: dense, formal, edge-to-edge -->
<section class="taj tjw fs13px lh1-7 c71717A maxw72rem">
... legal copy ...
</section>When to Use What?
| Text Type | Recommended | Reason |
|---|---|---|
| English, European | tjw | Justifies by adjusting spacing between words |
| CJK (Chinese/Japanese/Korean) | tjc | Justifies by adjusting spacing between characters |
| Mixed text | tja | Browser decides automatically |
Tips and Pitfalls
Without text-align: justify, nothing happens
This property only applies to lines that are actually being justified. Adding tjw without taj is silently ignored, and it is by far the most common mistake.
The last line is never justified
By default the final line of a paragraph is excluded from justification. Set text-align-last separately if you need it stretched too.
Browser support is uneven
text-justify is not supported in Safari, which applies only the default justification behavior of taj. Treat tjw and tjc as a progressive improvement, not a guarantee.
Narrow columns need hyphenation
The narrower the column, the more space each line must absorb, and the uglier the word gaps become. For Latin copy, pair it with hyphens and avoid very narrow measures.