Syllabus

CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More

Badar KhalilUpdated September 30, 2026 7 min read

CSS Text Effects: text-wrap balance, line-clamp, Ellipsis, Shadows and Gradients

CSS text effects make text look polished and stay readable at any width. Modern CSS gives you native tools that used to need JavaScript: text-wrap: balance for even headings, text-wrap: pretty for better paragraph endings, line-clamp for multi-line truncation, plus shadows, gradient text, outlines and more. This lesson covers the most useful effects with practical code and browser support notes.

What You Will Learn

Balanced and pretty line breaking with text-wrap
Single-line ellipsis and multi-line line-clamp
text-shadow for depth, glow and outlines
Gradient text with background-clip: text
Text stroke with -webkit-text-stroke and paint-order
Drop caps with initial-letter and ::first-letter
Vertical text with writing-mode and text selection styling
Accessibility and performance guidelines for text effects

text-wrap: balance

Headings often end with a single short word on the last line (a widow). text-wrap: balance asks the browser to spread words evenly across all lines so they are similar in length.

h1, h2, h3 { text-wrap: balance; }

It is best for headings, captions, blockquotes and short text, because the browser limits balancing to a small number of lines (about 6 in Chromium and 10 in Firefox).
It does not change the width of the box, only where lines break. Combine it with max-width to control the overall block.
Browsers that do not support it simply ignore it, so it is a safe progressive enhancement.

text-wrap: pretty

text-wrap: pretty asks the browser to favor better-looking line breaks in paragraphs, mainly by avoiding very short last lines. It is more relaxed than balance and suitable for body text, at a small layout cost. Support is newer and limited to some browsers, so treat it as an enhancement.

text-wrap Shorthand and Other Values

text-wrap: wrap: normal wrapping (default).
text-wrap: nowrap: no wrapping, same as white-space: nowrap for wrapping behavior.
text-wrap: stable: keeps earlier lines from changing while the user edits, useful in editable content.
text-wrap is the shorthand for text-wrap-mode and text-wrap-style.

Single-Line Ellipsis

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

All three properties are required, and the element needs a constrained width. In Flexbox or Grid children also add min-width: 0.

Multi-Line Truncation: line-clamp

The widely supported pattern uses the legacy box model together with the prefixed property:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

The number is how many lines to show before adding an ellipsis.
The standard unprefixed line-clamp is being rolled out and will work without the -webkit-box display, but keep the prefixed version for compatibility.
Clamped content remains in the DOM, so screen readers still read the whole text. Offer a way to see the full text, such as a Read more button.
Tailwind CSS provides this as line-clamp-3.

text-shadow

Syntax: text-shadow: x-offset y-offset blur color; and you can stack many shadows separated by commas.

Soft depth: text-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
Glow: text-shadow: 0 0 8px #0ff, 0 0 20px #0ff;
Fake outline: four shadows with 1px offsets in each direction.
Readability on images: a subtle dark shadow helps white text over photos, but an overlay is usually the more reliable fix.

Gradient Text

.gradient {
  background: linear-gradient(90deg, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Always keep a fallback color before the gradient rules for browsers that do not support clipping, and make sure the lightest part of the gradient still has enough contrast with the page background.

Text Stroke and paint-order

-webkit-text-stroke: 2px #222; draws an outline around glyphs and is supported in all modern browsers. The stroke is centered on the glyph edge, so it eats into the fill. Add paint-order: stroke fill; to draw the stroke underneath the fill for a cleaner outer outline. Use -webkit-text-fill-color: transparent; for hollow text.

Drop Caps

The initial-letter property makes a large first letter that spans several lines: p::first-letter { initial-letter: 3; }. Since support is limited, a float based fallback is common: float: left; font-size: 3.2em; line-height: 0.9; padding-right: 0.08em;.

Vertical Text: writing-mode

writing-mode: vertical-rl; turns text to run top to bottom. text-orientation: upright; keeps letters upright in vertical text. It is essential for East Asian vertical typography and also great for sidebar labels and rotated table headers without transforms.

Styling Text Selection

The ::selection pseudo-element styles highlighted text: ::selection { background: #ffe066; color: #000; }. Keep contrast high.

Other Handy Text Effects

text-decoration variants: wavy red underline for errors, or a thick offset underline for links.
text-underline-position: under moves the underline below descenders.
hyphens: auto reduces ragged edges in narrow columns.
text-emphasis adds marks above characters, used in East Asian typography.
mix-blend-mode and backdrop-filter can create advanced overlay text, but test performance on mobile.

Accessibility and Performance

Text effects must not reduce contrast below 4.5:1 for normal text and 3:1 for large text.
Gradient and stroke text can be unreadable in Windows High Contrast (forced colors) mode, so test it.
Do not use heavy animated effects on large blocks of text. Respect prefers-reduced-motion for moving text effects.
Use real text, never text inside images, so it stays selectable, translatable and searchable.
Avoid large blur radii on many elements, since they are costly to paint.

Common Mistakes

Using text-wrap: balance on long paragraphs and expecting it to work.
Forgetting white-space: nowrap with text-overflow: ellipsis.
Missing overflow: hidden on a clamped element.
Making gradient text with a transparent fill and no fallback color.
Expecting line-clamp to hide the text from screen readers.
Stacking too many text shadows, which hurts readability.

Frequently Asked Questions

What does text-wrap: balance do?

It balances the line lengths of a block of text so headings do not end with one lonely word.

What is the difference between balance and pretty?

balance equalizes all lines in short text. pretty mostly fixes bad last lines in long paragraphs.

How do I truncate text after two lines?

Use the line-clamp pattern with a value of 2, including display: -webkit-box and overflow: hidden.

How do I make gradient text?

Set a gradient as the background, clip it to the text with background-clip: text and make the text fill transparent.

Key Takeaways

Use text-wrap: balance on headings and text-wrap: pretty on paragraphs as progressive enhancements.
Ellipsis needs nowrap + overflow hidden + text-overflow. Multi-line truncation uses line-clamp.
Gradient text needs background-clip: text and a transparent fill.
Stack text-shadow values for depth or glow, but protect contrast.
Test accessibility, forced colors and reduced motion for every effect.

Try it Yourself HTML

<style>
.box { width: 360px; border: 1px dashed #999; padding: 10px; margin: 10px 0; }
h2 { margin: 0; font-size: 1.6rem; font-family: system-ui, sans-serif; }
.plain { text-wrap: wrap; }
.balance { text-wrap: balance; }
</style>
<div class='box'><h2 class='plain'>Understanding modern CSS layout and typography</h2></div>
<div class='box'><h2 class='balance'>Understanding modern CSS layout and typography</h2></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
p { width: 300px; font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; border: 1px dashed #999; padding: 8px; }
.wrap { text-wrap: wrap; }
.pretty { text-wrap: pretty; }
</style>
<p class='wrap'>wrap: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.</p>
<p class='pretty'>pretty: Good typography keeps paragraphs tidy and readable on every device and screen width you can imagine, including tiny phones.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.ellipsis { width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #999; padding: 6px; }
.clamp2 { width: 240px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; border: 1px solid #999; padding: 6px; margin-top: 10px; }
</style>
<div class='ellipsis'>Single line ellipsis: this sentence is too long to fit in one line.</div>
<div class='clamp2'>Two line clamp: this paragraph is much longer and will only show the first two lines before it is cut with an ellipsis, even though there is more text.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
body { background: #111; padding: 20px; font-family: system-ui, sans-serif; }
h2 { font-size: 2.2rem; margin: 10px 0; color: #fff; }
.soft { text-shadow: 0 2px 6px rgb(0 0 0 / 0.6); }
.glow { color: #e0ffff; text-shadow: 0 0 6px #0ff, 0 0 18px #0ff, 0 0 36px #08f; }
.retro { color: #ffe066; text-shadow: 3px 3px 0 #e74c3c, 6px 6px 0 #8e44ad; }
</style>
<h2 class='soft'>Soft depth shadow</h2>
<h2 class='glow'>Neon glow effect</h2>
<h2 class='retro'>Retro stacked shadow</h2>

Output

Press Run to execute.

Try it Yourself HTML

<style>
h1 { font-family: system-ui, sans-serif; font-size: 3rem; margin: 0; }
.gradient {
  color: #e74c3c; /* fallback */
  background: linear-gradient(90deg, #ff6a00, #ee0979, #7b2ff7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
<h1 class='gradient'>Gradient Text</h1>

Output

Press Run to execute.

Try it Yourself HTML

<style>
body { background: #fdf6e3; padding: 20px; }
.outline { font: 800 3.5rem system-ui, sans-serif; color: #ffe066; -webkit-text-stroke: 3px #222; paint-order: stroke fill; margin: 0; }
.hollow { font: 800 3.5rem system-ui, sans-serif; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #2c3e50; margin: 0; }
</style>
<p class='outline'>Outlined</p>
<p class='hollow'>Hollow</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
.dropcap::first-letter { float: left; font-size: 3.6em; line-height: 0.85; padding: 0.05em 0.1em 0 0; font-weight: 700; color: #c0392b; font-family: Georgia, serif; }
.vertical { writing-mode: vertical-rl; text-orientation: mixed; font: 700 1.2rem system-ui, sans-serif; letter-spacing: 0.15em; background: #2c3e50; color: #fff; padding: 12px 6px; display: inline-block; margin-left: 20px; }
::selection { background: #ffe066; color: #000; }
p { width: 320px; line-height: 1.6; font-family: Georgia, serif; }
</style>
<p class='dropcap'>Drop caps bring a classic editorial feel to the start of an article. Select this text to see the custom highlight color as well.</p>
<span class='vertical'>SIDEBAR LABEL</span>

Output

Press Run to execute.

Exercise: Balance a HeadlineHTML

The headline below leaves one short word on the last line. Using a single CSS property on .headline, make the browser balance the line lengths. Also limit its width to 22em.

Try it Yourself HTML

<style>
.headline { font: 700 2rem/1.2 system-ui, sans-serif; /* your CSS here */ }
</style>
<h1 class='headline'>Everything you need to know about modern CSS typography</h1>

Output

Press Run to execute.

Show expected output

The headline uses text-wrap: balance and max-width: 22em so the lines are even.

This is a self-check — compare your result with the expected output above.

Exercise: Two-Line Card DescriptionHTML

Truncate the .desc text to exactly two lines with an ellipsis at the end using the line-clamp pattern. The text should be hidden after the second line.

Try it Yourself HTML

<style>
.card { width: 260px; border: 1px solid #ccc; padding: 12px; font-family: system-ui, sans-serif; }
.desc { /* your CSS here */ }
</style>
<div class='card'>
  <p class='desc'>This description is intentionally long so it needs more than two lines when displayed in a narrow card, and everything after the second line should be cut with an ellipsis.</p>
</div>

Output

Press Run to execute.

Show expected output

Only two lines are visible and the second line ends with an ellipsis.

This is a self-check — compare your result with the expected output above.

Exercise: Gradient HeadingHTML

Make the h1 text show a horizontal gradient from #ff6a00 to #ee0979. Use background-clip for text and make the fill transparent. Keep a fallback color.

Try it Yourself HTML

<style>
h1 { font: 800 3rem system-ui, sans-serif; /* your CSS here */ }
</style>
<h1>Gradient Text</h1>

Output

Press Run to execute.

Show expected output

The heading text is filled by a gradient from #ff6a00 to #ee0979.

This is a self-check — compare your result with the expected output above.

Exercise: Truncate Text in JavaScriptJAVASCRIPT

Write a function truncate(text, maxChars) that returns the text unchanged if its length is at most maxChars. Otherwise return the first maxChars - 1 characters followed by the ellipsis character (…), so the total length equals maxChars.

Try it Yourself JAVASCRIPT

function truncate(text, maxChars) {
  // TODO: implement
}

console.log(truncate('Short', 10));
console.log(truncate('This is a long sentence', 10));
console.log(truncate('Exactly ten', 11));

Output

Press Run to execute.

Show expected output

Short
This is a…
Exactly ten

This is a self-check — compare your result with the expected output above.

Was this page helpful?