CSS Text Advanced
In this page:
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.
Note: Set text-align-last: center on justified pull-quotes so the short final line looks intentional rather than accidental.
Warning: text-align-last has no visible effect unless the paragraph is already justified or naturally wraps onto multiple lines.
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.
Note: Use word-break: break-all specifically on code snippets or URLs, not on regular paragraph text where it can cut normal words awkwardly.
Warning: break-all applied globally will break ordinary short English words mid-letter whenever a line happens to run slightly long.
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.
Note: Always pair hyphens: auto with lang="en" (or the correct language code) on the html element, or the browser has no hyphenation dictionary to use.
Warning: hyphens: auto silently does nothing in browsers or documents missing a valid lang attribute, which can be confusing to debug.
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.
Note: Use hanging-punctuation: first on blockquotes so an opening quotation mark does not create a small visual indent on the first line.
Warning: text-justify only has an effect when text-align is already set to justify, and hanging-punctuation has limited browser support outside Safari.
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.
Note: Use text-emphasis to highlight East-Asian text the traditional way, since italics and underlines are not conventional emphasis styles in CJK typography.
Warning: Setting unicode-bidi: bidi-override without a correct direction value can scramble the reading order of mixed-direction text unexpectedly.
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>- Setting hyphens: auto without also declaring a lang attribute on the html tag, so the browser has no dictionary to hyphenate against.
- Using word-break: break-all on ordinary English prose, which chops normal words mid-letter instead of only breaking long unbreakable strings.
- Expecting text-align-last to do anything on a paragraph that is not itself text-align: justify, since it only affects the final line of justified text.
- text-align-last, text-justify, and hanging-punctuation fine-tune how justified paragraphs distribute space and handle edge punctuation.
- word-break and hyphens control how the browser handles long words that would otherwise overflow their container.
- unicode-bidi and text-emphasis handle bidirectional text direction and East-Asian style emphasis marks respectively.
hyphens, word-break, and text-emphasis are supported in all modern browsers; text-align-last, text-justify, and hanging-punctuation have partial support, with text-justify most reliable in Chromium-based browsers.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: