Long content escapes its box when the box is too small. overflow decides what happens to the excess: visible, hidden, clip, scroll or auto. For one line ending in dots, combine white-space: nowrap, overflow: hidden and text-overflow: ellipsis. For several lines use -webkit-line-clamp. To split unbreakable words, use overflow-wrap: anywhere.
| Problem | CSS | Tailwind |
|---|---|---|
| One line, cut with dots | white-space: nowrap; overflow: hidden; text-overflow: ellipsis | truncate |
| Three lines, then dots | display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden | line-clamp-3 |
| Long URL breaks the layout | overflow-wrap: anywhere | wrap-anywhere (v4.1) or break-words |
| Box needs its own scrollbar | overflow: auto | overflow-auto |
Updated
Drag the width slider and the sample box shrinks around a real web address, the word Donaudampfschifffahrtsgesellschaft and a normal sentence. Every overflow, wrapping and clamping option is a button, the result is instant, and the CSS you would need is written out underneath.
| Value | Excess content | Scrollbars | Scroll container? | Tailwind |
|---|---|---|---|---|
| visible | Paints outside the box | Never | No | overflow-visible |
| hidden | Cut off at the padding edge | Never | Yes (scrollable by script) | overflow-hidden |
| clip | Cut off | Never | No | overflow-clip |
| scroll | Scrolls | Always shown | Yes | overflow-scroll |
| auto | Scrolls | Only when needed | Yes | overflow-auto |
Remove any one of the three declarations and the dots disappear. The title attribute keeps the full text available.
<style>
.one-line { width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border: 1px solid #cbd5e1; padding: 6px 8px }
</style>
<p class="one-line" title="Handmade ceramic mugs, glazed in small batches in our studio">Handmade ceramic mugs, glazed in small batches in our studio</p>The middle item gets min-width: 0 so it may shrink below its text width. Without it the row overflows instead.
<style>
.row { display: flex; gap: 8px; align-items: center; width: 280px; border: 1px solid #cbd5e1; padding: 6px }
.name { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tag { flex: none; background: #dbeafe; padding: 2px 8px; border-radius: 99px; font-size: 12px }
</style>
<div class="row"><b>#12</b><span class="name">Quarterly-report-final-version-reviewed.pdf</span><span class="tag">PDF</span></div>The prefixed pattern below is the widely supported one. The plain line-clamp declaration is added for browsers that already handle it.
<style>
.clamp { width: 260px; display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: 1.4 }
</style>
<p class="clamp">Our two-day pottery course covers wedging, centring and throwing on the wheel, then trimming and glazing on day two. Small groups of six, all clay and firing included, and you take home everything you make.</p>| Declaration | Breaks where | Good for | Tailwind |
|---|---|---|---|
| overflow-wrap: break-word | Inside a word only if it would overflow | Body text with the odd long word | break-words |
| overflow-wrap: anywhere | Same, and allows the box to shrink | URLs in flex items and narrow columns | wrap-anywhere (v4.1) |
| word-break: break-all | Between any letters, always | Code, hashes, IDs | break-all |
| word-break: keep-all | Never inside CJK words | Chinese, Japanese, Korean | break-keep |
| hyphens: auto | At syllables, with a hyphen | Narrow or justified text with lang set | hyphens-auto |
Each box is 160px wide. Only the last is left to overflow.
<style>
p { width: 160px; border: 1px solid #94a3b8; padding: 4px; margin: 0 0 8px; font-size: 13px }
</style>
<p style="overflow-wrap: anywhere">anywhere: https://example.com/a-very-long-path/with-no-spaces</p>
<p style="word-break: break-all">break-all: https://example.com/a-very-long-path/with-no-spaces</p>
<p lang="de" style="-webkit-hyphens: auto; hyphens: auto">hyphens (de): Donaudampfschifffahrtsgesellschaft</p>
<p>default: https://example.com/a-very-long-path/with-no-spaces</p>table-layout: fixed makes the column widths win over the content, so the ellipsis can kick in.
<style>
table { width: 300px; table-layout: fixed; border-collapse: collapse; font-size: 13px }
td, th { border: 1px solid #cbd5e1; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
col.n { width: 40px }
</style>
<table>
<colgroup><col class="n"><col></colgroup>
<tr><th>#</th><th>Customer note</th></tr>
<tr><td>1</td><td>Please leave the parcel with the neighbour at number 14 if nobody answers</td></tr>
<tr><td>2</td><td>Gift wrap</td></tr>
</table>visible is the default and lets content paint outside the box without affecting layout around it. hidden and clip cut it at the padding edge. scroll always shows scrollbars, even when nothing overflows, and auto shows them only when needed, which is nearly always the better choice.
overflow is shorthand for overflow-x and overflow-y. Setting one axis to visible and the other to hidden does not work as written: the browser computes visible as auto in that pairing, so you may see an unexpected scrollbar. clip is the exception and can be combined with visible.
overflow-wrap: break-word breaks long words when needed but does not let the box shrink below the longest word, so it can still overflow inside flex items and tables. overflow-wrap: anywhere also lowers that minimum size, which is why it fixes long URLs in narrow sidebars.
hyphens: auto inserts a hyphen at a proper syllable boundary for languages the browser supports, making justified or narrow German and Dutch text far more readable. Some Safari versions only understand -webkit-hyphens, so write both. Use hyphens: manual and the ­ soft hyphen when you want to choose the break points yourself.
Clipped text is still in the page, so screen readers read the whole thing, which is good. Sighted keyboard and touch users are the ones who lose out, because they cannot hover to see a tooltip.
For product names or messages that matter, offer a way to expand the text, such as a Show more button or a details element, instead of relying on the ellipsis alone. Keep line clamps for previews where the full text is one click away.
Usually one of its partners is missing. The element must be block-level or inline-block with a constrained width, have overflow set to hidden or clip, and keep the text on one line with white-space: nowrap. In a flex or grid item, also add min-width: 0 so the item is allowed to shrink.
The prefixed form, -webkit-line-clamp together with display: -webkit-box and -webkit-box-orient: vertical, works in all current major browsers and is what Tailwind outputs. The unprefixed line-clamp property from CSS Overflow Level 4 is still rolling out, so check caniuse before relying on it alone.
overflow-wrap only breaks a word when it would otherwise overflow, so normal words wrap normally. word-break: break-all lets the browser break between any two letters everywhere, which gives ragged, hard-to-read text. word-break: keep-all is for Chinese, Japanese and Korean text where you do not want breaks inside words.
Both cut off the excess. hidden still creates a scroll container, so script can scroll it and it affects position: sticky inside. clip forbids all scrolling, and with overflow-clip-margin you can let content spill a few pixels past the edge before clipping.
Set table-layout: fixed on the table and a width on the columns, then apply the usual nowrap, hidden and ellipsis trio to the cell. Without fixed layout the column simply grows to fit the text. Another option is max-width: 0 with width: 100% on the cell.
Related: CSS text styling playground, CSS box model visualiser, Flexbox and grid cheat sheet, CSS sizing functions, HTML accessibility checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.