C S S Text Justify Generator | Brix340 Tools

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