CSS Text Advanced

Aligning the Final Line with text-align-last

When a paragraph uses text-align: justify, every line except the last one gets stretched so its words touch both edges. text-align-last controls that leftover final line specifically, letting you left-align, center, or even justify it too instead of leaving it at its natural short length.

Example: Aligning the Final Line with text-align-last

<style>
p {
  text-align: justify;
  text-align-last: center;
}
</style>
<p>This justified paragraph has a short final line and this last line is centered instead of left.</p>

Breaking Long Words with word-break

word-break controls what happens when a single unbroken word, like a long URL or filename, is too wide to fit inside its container.

Setting it to break-all allows the browser to break between any two characters, while keep-all prevents breaking inside CJK text where words are not separated by spaces.

Example: Breaking Long Words with word-break

<style>
.url {
  width: 150px;
  word-break: break-all;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 6px;
}
</style>
<div class="url">https://example.com/very/long/unbroken/url/path</div>

Automatic Hyphenation with hyphens

hyphens: auto tells the browser to automatically insert hyphens at appropriate syllable breaks when a word must wrap onto the next line, exactly like hyphenation in a printed book. It relies on the language declared via the lang attribute to know where syllable breaks are valid.

Example: Automatic Hyphenation with hyphens

<html lang="en">
<style>
  p {
    hyphens: auto;
    width: 100px;
  }
</style>
<p>Internationalization is a very long word that needs hyphenation</p>
</html>

Fine-Tuning Spacing with text-justify and hanging-punctuation

text-justify refines exactly how text-align: justify distributes extra space -- inter-word (only between words) versus inter-character (between every character), which matters most for CJK typography. hanging-punctuation lets opening quotation marks or bullets hang slightly outside the text block's edge, which is a subtle trick print typographers use to keep the visual left edge looking perfectly straight.

Example: Fine-Tuning Spacing with text-justify and hanging-punctuation

<style>
p {
  text-align: justify;
  text-justify: inter-word;
}
blockquote {
  hanging-punctuation: first;
}
</style>
<p>Justified text spaced only between words, not between characters.</p>
<blockquote>"A quotation mark hangs slightly outside the edge."</blockquote>

Text Direction and Emphasis with unicode-bidi and text-emphasis

unicode-bidi works together with the direction property to control how the browser handles mixed left-to-right and right-to-left text, such as an English sentence containing an embedded Arabic phrase. text-emphasis adds small marks above or below characters, similar to how CJK typography uses dots or circles to emphasize a run of text instead of using italics or bold.

Example: Text Direction and Emphasis with unicode-bidi and text-emphasis

<style>
.mixed {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.emphasis {
  text-emphasis: dot;
}
</style>
<p class="mixed">English text with an embedded phrase</p>
<p class="emphasis">Emphasized run of text</p>