Intermediate LevelCSS & Modern Layouts
What do text-wrap: balance and text-wrap: pretty do in modern CSS?
❓ Interview Prompt: Explain text wrapping improvements for avoiding orphaned words and balanced line lengths.
Modern CSS introduces new text-wrap values for improved typographic line breaking:
text-wrap: balance:
Adjusts line breaks so all lines in a text block have approximately equal length. Prevents the "runt" problem where the last line has only one or two words. Best for headings (limited to ~6 lines for performance).
text-wrap: pretty:
Optimizes line breaks to avoid orphaned words (single words on the last line of a paragraph). Designed for body text with no line count limitation.
Code Implementation Example
css
/* Balanced headings (equal line lengths) */
h1, h2, h3 {
text-wrap: balance;
}
/* Pretty body text (avoids orphans) */
p {
text-wrap: pretty;
}
/* Multi-line truncation with line-clamp */
.excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}💡Balanced headings, pretty paragraphs, and multi-line text truncation.
🎯 Interview Key Takeaway
Use text-wrap: balance for headings and text-wrap: pretty for paragraphs to eliminate typographic orphans.
#text-wrap#Typography#Modern#Intermediate
Back to all CSS & Modern Layouts Questions→