CSS Text Justify Generator
Configure text justification methods and spacing
Presets
Target Element
text-justify
Controls how text is justified when text-align: justify is applied
text-align-last
Hyphenation
Word Spacing
Letter Spacing
Preview Settings
Generated CSS
p {
text-align: justify;
-webkit-hyphens: auto;
hyphens: auto;
}
/* Ensure lang attribute is set on HTML for hyphenation */
/* <html lang="en"> or <p lang="en"> */Live Preview
Without Justify
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.
With Justify
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.
text-align-last Comparison
text-align-last: auto
This is sample text that demonstrates how the last line is aligned with different values.
text-align-last: left
This is sample text that demonstrates how the last line is aligned with different values.
text-align-last: center
This is sample text that demonstrates how the last line is aligned with different values.
text-align-last: right
This is sample text that demonstrates how the last line is aligned with different values.
text-align-last: justify
This is sample text that demonstrates how the last line is aligned with different values.
text-justify Comparison
auto (default)
Browser automatically selects the best justification method for the content type.
inter-word
Justification adjusts spacing between words. Best for Western languages.
inter-character
ใฟใคใใฐใฉใใฃใฏใๆดปๅญใ้
็ฝฎใใฆใ่กจ็คบใใใใจใใซๆธใ่จ่ใ่ชญใฟใใใใ่ชญใฟใใใใ้ญ
ๅ็ใซใใๆ่กใจๆๆณใงใใๆดปๅญใฎ้
็ฝฎใซใฏใๆธไฝใใใคใณใใตใคใบใ่กใฎ้ทใใ
none
Disables justification even though text-align is set to justify.
Full Examples
Newspaper Column Style
.newspaper-column {
text-align: justify;
text-justify: inter-word;
text-align-last: left;
-webkit-hyphens: auto;
hyphens: auto;
column-count: 2;
column-gap: 2em;
}
/* Prevent widows and orphans */
.newspaper-column {
widows: 3;
orphans: 3;
}Book Paragraph
.book-paragraph {
text-align: justify;
text-indent: 1.5em;
text-align-last: start;
-webkit-hyphens: auto;
hyphens: auto;
line-height: 1.7;
}
/* First paragraph without indent */
.book-paragraph:first-of-type {
text-indent: 0;
}CJK (Japanese/Chinese) Text
.cjk-text {
text-align: justify;
text-justify: inter-character;
word-break: normal;
overflow-wrap: break-word;
line-height: 1.8;
}
/* For vertical text */
.cjk-text.vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
}Balanced Last Line (Centered)
.centered-last {
text-align: justify;
text-align-last: center;
max-width: 45ch;
margin: 0 auto;
}
/* Alternative: use text-wrap: balance (modern) */
.balanced-text {
text-wrap: balance;
text-align: center;
}Responsive Justification
/* Only justify on wider screens */
.responsive-justify {
text-align: left;
}
@media (min-width: 768px) {
.responsive-justify {
text-align: justify;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
}
}
/* Use CSS variable for control */
.justify-container {
--justify-mode: left;
text-align: var(--justify-mode);
}
@media (min-width: 768px) {
.justify-container {
--justify-mode: justify;
}
}Fine-tuned Justification
/* Control word and letter spacing */
.fine-tuned {
text-align: justify;
text-justify: inter-word;
word-spacing: 0.05em;
letter-spacing: -0.01em;
-webkit-hyphens: auto;
hyphens: auto;
}
/* Limit excessive stretching */
.fine-tuned {
text-align-last: left; /* Avoid stretching last line */
max-width: 70ch; /* Optimal line length */
}Reference
text-justify Values
| Value | Description | Use Case |
|---|---|---|
auto | Browser default (usually inter-word) | General use |
none | Disables justification | Override inherited justify |
inter-word | Adjusts word spacing | Western languages |
inter-character | Adjusts character spacing | CJK languages |
text-align-last Values
| Value | Description |
|---|---|
auto | Follows text-align (if justify, uses start) |
start | Start of line (respects direction) |
end | End of line (respects direction) |
left | Always left-aligned |
right | Always right-aligned |
center | Centered last line |
justify | Stretched last line (use carefully) |
Browser Support
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
text-align: justify | 1+ | 1+ | 1+ | 12+ |
text-justify | 32+ | 55+ | No | 12+ |
text-align-last | 47+ | 49+ | 16+ | 12+ |
hyphens | 55+ | 43+ | 5.1+ (-webkit-) | 79+ |
Best Practices
- Use hyphens: Enable hyphenation with justified text to reduce large word gaps
- Set lang attribute: Hyphenation requires the correct lang attribute on HTML elements
- Control last line: Use text-align-last: left to prevent stretched last lines
- Line length: Keep lines between 45-75 characters for optimal readability
- Avoid narrow columns: Justification in narrow spaces creates "rivers" of white space
- Consider mobile: Left-aligned text often works better on small screens
- CJK text: Use text-justify: inter-character for Japanese, Chinese, and Korean
Common Issues
- Rivers: Large white gaps between words - fix with hyphenation or narrower columns
- Stretched last line: Use text-align-last: left or start
- Hyphenation not working: Ensure lang attribute is set and browser supports the language
- Safari text-justify: Safari doesn't support text-justify; it uses auto behavior
- Inconsistent spacing: Consider word-spacing and letter-spacing adjustments