Entry 01

Long text that wraps, truncates or clamps

Use it on any text that comes from a user or a CMS, such as names, titles, URLs and excerpts. Decide for each one what happens when the content is longer than the design. It wraps, it is cut to one line, or it is cut to a few lines.

Open

Make the frame narrower. The long address breaks inside its box and never sticks out of it. Each name stays on one line and ends in an ellipsis. The excerpt stops after three lines with an ellipsis, at any width.

Code CSS · 14 lines

:root { overflow-wrap: break-word; }

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

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

Why it works, the rules and the credits 4 reasons · 7 rules · support · credits

Why it works

overflow-wrap: break-word breaks a word only when it cannot fit on a line by itself. Ordinary text wraps as before. It inherits, so the one declaration in the reset covers the page.
The reset's min-width: 0 lets a flex or grid item get narrower than its longest word. It does nothing for the word, which then paints over the next column. The two rules need each other.
nowrap keeps the text on one line, overflow cuts it and text-overflow draws the ellipsis at the cut.
-webkit-line-clamp counts lines, so the clamp holds at any font size and any width.

Rules

Put the truncation on the element that holds the text. On a flex or grid container the text is cut and no ellipsis appears.
Every flex item between the row and the truncated text must be able to shrink. The reset's min-width: 0 covers that. Without the reset, set min-inline-size: 0 on each of them.
The clamp needs all four declarations. Unprefixed line-clamp is in no browser yet.
Put padding on a wrapper, never on the clamped element. The next line shows through the bottom padding.
Use break-word on the root and not anywhere. anywhere also shrinks the minimum content width, so a box sized by its content collapses to one letter per line.
A table with automatic layout ignores break-word. Set overflow-wrap: anywhere on the cell.
Truncate only text the reader can get in full somewhere else. Never truncate text they have to read.

Support

text-overflow, -webkit-line-clamp and overflow-wrap: break-word work everywhere. With overflow: clip the ellipsis and the clamp draw in Chrome 150 and Safari 27, tested on 2026-10-01. Firefox is untested, and overflow: hidden is the form to fall back to. overflow-wrap: anywhere in Chrome 80, Firefox 65, Safari 15.4.

Credits

Borrowed from: Ahmad Shadeed, Defensive CSS, the tips Long content and Minimum content size in flexbox · Ahmad Shadeed, Handling Short And Long Content In CSS, 2020-12-16

Docs: MDN: overflow-wrap · MDN: text-overflow · MDN: line-clamp