CSS Advanced
CSS Text Effects
CSS gives fine control over how text flows, breaks, and overflows its container. You can truncate with an ellipsis, force or prevent wrapping, clamp to a number of lines, and even rotate text vertically with writing-mode.
Truncating with text-overflow
To show an ellipsis when text is too long, you need three properties together: prevent wrapping, hide overflow, and set the ellipsis. All three are required for single-line truncation.
.truncate {
white-space: nowrap; /* keep on one line */
overflow: hidden; /* hide the excess */
text-overflow: ellipsis; /* show ... */
}<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 30px; background:#f8fafc; }
.box { width: 240px; background:#fff; padding:12px 16px; border-radius:10px;
box-shadow:0 2px 8px rgba(0,0,0,.1); margin-bottom:14px; }
.truncate {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box truncate">This headline is far too long to fit on one line so it ends with an ellipsis.</div>
<div class="box">This headline wraps normally onto multiple lines instead of truncating.</div>
</body>
</html>Wrapping and breaking words
Long unbroken strings like URLs can overflow. overflow-wrap: break-word lets the browser break inside a word only if it would otherwise overflow, while word-break: break-all breaks anywhere. white-space controls whether whitespace collapses and where lines break.
| Property / value | Effect |
|---|---|
| white-space: nowrap | Never wraps to a new line |
| white-space: pre | Keeps spaces and line breaks as written |
| overflow-wrap: break-word | Breaks long words only when needed |
| word-break: break-all | Breaks between any characters |
| hyphens: auto | Adds hyphens at valid break points |
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 30px; background:#0f172a; color:#e2e8f0; }
.col { width: 200px; background:#1e293b; padding:12px; border-radius:8px; }
.wrap { overflow-wrap: break-word; }
</style>
</head>
<body>
<div class="col wrap">
https://example.com/very/long/path/that/would/otherwise/overflow
</div>
</body>
</html>Clamping to multiple lines
The line-clamp technique limits text to a fixed number of lines and adds an ellipsis after the last one, which is common in cards and previews.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 30px; background:#eef2ff; }
.clamp {
width: 240px; background:#fff; padding:16px; border-radius:10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<p class="clamp">This description is clamped to just two lines and everything after the second line is hidden behind an ellipsis so the card stays tidy.</p>
</body>
</html>Vertical text with writing-mode
writing-mode changes the direction text flows. vertical-rl and vertical-lr stack characters top to bottom, which is useful for sidebars, chart labels, and East Asian layouts.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:flex; gap:20px; padding:30px; background:#fff7ed; }
.label {
writing-mode: vertical-rl;
background:#ea580c; color:#fff; padding:16px 10px;
border-radius:8px; font-weight:bold; letter-spacing:2px;
}
</style>
</head>
<body>
<div class="label">FEATURED</div>
<p style="max-width:300px">writing-mode rotates the whole text block, so the label reads top to bottom without any transform.</p>
</body>
</html>text-overflow: ellipsis only works on a single line unless you combine the -webkit-line-clamp technique for multi-line truncation.
text-overflow needs overflow: hidden and a block that cannot wrap (white-space: nowrap) to show the ellipsis.
Key points
- Single-line ellipsis needs nowrap, overflow hidden, and text-overflow.
- overflow-wrap: break-word breaks long strings only when needed.
- white-space controls whitespace collapsing and wrapping.
- -webkit-line-clamp truncates to a set number of lines.
- writing-mode: vertical-rl makes text flow top to bottom.