CSS layout reference

When the content does not fit.

Real content is longer than the design assumed: a forty-word title, a pasted URL, a file name with no spaces. This reference covers the properties that decide what happens next, and the one flexbox default responsible for most layouts that refuse to shrink.

text-overflow: ellipsis

Single-line ellipsis

The ellipsis needs three declarations working together: the text must be kept to one line (white-space: nowrap), the box must clip it (overflow: hidden), and only then does text-overflow: ellipsis have an overflow to mark. It also needs a box with a width that can be smaller than the text — which in flex and grid is its own entry below.

truncate

card width 260px

Quarterly infrastructure review: migration of the billing service to the new region, with rollback notes and owner sign-off

updated 2 days ago

Use it for

File names, email subjects, breadcrumb segments, table cells — anywhere a row must stay one line tall.
Pair it with a title attribute or a tooltip, so the full text is still reachable.

Watch for

It applies to block containers. On an inline span it does nothing until the span is display: block or inline-block, or is a flex or grid item.
The middle of a string is often the part that matters — a path’s file name, an ID’s last characters. CSS can only cut the end; middle truncation needs two elements or script.
Truncated text is hidden from sighted users but still read in full by a screen reader, which is normally what you want. Do not truncate the accessible name yourself.
A truncated heading that is the only place a piece of information appears is a content problem, not a CSS one.

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

line-clamp

Multi-line clamping

Cutting text after a number of lines, with an ellipsis on the last. The form that works everywhere is still the prefixed one — display: -webkit-box with -webkit-box-orient and -webkit-line-clamp — which every engine supports under that name. The unprefixed line-clamp property is the standard going forward; declare both.

Use it for

Card descriptions and list previews, so a grid of cards keeps even heights.
Comment and review excerpts ahead of a “Read more”.
Two-line titles: far more forgiving of long content than a one-line ellipsis.

Watch for

It needs overflow: hidden, and it breaks if the element has bottom padding — the clipped lines show through in the padding. Put the padding on a wrapper.
display: -webkit-box replaces the element’s display, so it cannot also be a flex or grid container. Clamp an inner element.
A “Read more” toggle should only appear when the text was actually clamped: compare scrollHeight with clientHeight.
Clamping by lines hides a different amount of text at every width. Never clamp anything a user must read in full — errors, legal copy, prices.

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

min-width: 0

The flex and grid shrink trap

Flex and grid items have min-width: auto, which means “never smaller than my content’s minimum size”. For wrapping text that minimum is the longest word. For nowrap text, a long URL, a <pre>, or a wide table, it is the whole thing — so the item refuses to shrink, bursts its container, and no amount of overflow or ellipsis on it helps. min-width: 0 lifts the floor.

min-width (on the label)

invoices/2026/september/final-approved-v3.pdfOpen

The dashed box is the row’s intended width. With auto the label’s minimum is its full unbroken text, so the row bursts and the button is pushed out. With 0 it may shrink, and the ellipsis finally has something to do.

Use it for

Any flex child that holds truncating text: min-width: 0 on the child that should shrink.
Grid columns: minmax(0, 1fr) instead of 1fr, which is shorthand for minmax(auto, 1fr) and has the same floor.
Code blocks, tables, and carousels inside a flex or grid layout — the wrapper needs min-width: 0 before its overflow: auto can take effect.
The vertical twin: min-height: 0 on a flex column child that should scroll rather than grow.

Watch for

It must go on every flex or grid item between the container and the text. One nested wrapper without it restores the floor.
overflow: hidden on the item also lifts the floor, as a side effect — which is why truncation sometimes works by accident, then breaks when someone removes the overflow.
The symptom shows up somewhere else: a sidebar pushed off-screen, a horizontal scrollbar on the page, a button squeezed to nothing. Look for the widest unbreakable child.

.row   { display: flex; gap: 0.5rem; }
.label { flex: 1; min-width: 0;            /* may now shrink */
         overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }

overflow-wrap

Breaking long words

Browsers only break lines at spaces and hyphens, so a URL, a hash, or a German compound simply runs out of its box. overflow-wrap lets the browser break inside a word, but only when that word would otherwise overflow. word-break: break-all is blunter: it breaks any word at the line’s end, whether or not it would have fitted on the next line.

wrapping

Documentation for internationalization lives at https://example.com/docs/guides/internationalization/configuration

break-word and anywhere only break a word that would otherwise overflow. break-all breaks every word wherever the line ends, including ones that would have fitted on the next line.

Use it for

overflow-wrap: anywhere on user-generated content — comments, chat, profile fields — where a pasted URL must never break the layout.
overflow-wrap: break-word for the same job where the content’s minimum size should stay the longest word.
hyphens: auto on justified or narrow prose columns. It needs a correct lang attribute to know the language’s rules.
A <wbr> element to suggest break points inside long identifiers and paths.

Watch for

The difference between anywhere and break-word is invisible until flex or grid: anywhere lowers the element’s minimum content size, so the item can shrink; break-word does not, so the item can still blow out.
word-break: break-all wrecks ordinary prose, splitting short words mid-syllable. Reserve it for strings that are not words at all.
word-break: break-word is a deprecated alias. Use overflow-wrap.
None of this applies inside white-space: nowrap or pre.

.user-content { overflow-wrap: anywhere; }
.prose        { hyphens: auto; }        /* with <html lang="en"> */
.hash         { word-break: break-all; font-family: monospace; }

text-wrap

Balanced and pretty wrapping

By default the browser fills each line as full as it can and leaves whatever remains on the last, which is how a headline ends on a single orphaned word. text-wrap: balance evens out the line lengths instead. text-wrap: pretty keeps normal filling but adjusts the last few lines to avoid a lone final word.

Use it for

balance on headings, pull quotes, card titles, and short centred copy.
pretty on body paragraphs and captions.
Both degrade to ordinary wrapping where unsupported, so they need no fallback.

Watch for

balance is limited to a few lines — browsers stop balancing beyond roughly six to ten — so it silently does nothing on long paragraphs.
A balanced block is narrower than its container, which can look like unwanted padding when the element has a visible background or border.
balance changes where lines break but not the box’s width. To shrink the box to the balanced text, also give it width: fit-content.

h1, h2, h3, blockquote { text-wrap: balance; }
p, figcaption          { text-wrap: pretty; }

Start from the symptom

The ellipsis never appears: Single-line ellipsis
Cards in a grid have uneven heights: Multi-line clamping
A flex child will not shrink: The flex and grid shrink trap
A code block makes the whole page scroll sideways: The flex and grid shrink trap
A pasted URL breaks the layout: Breaking long words
A heading ends on one lonely word: Balanced and pretty wrapping

Keep going

Most overflow starts as a sizing decision.

The sizing reference covers flex-basis, fr units, auto-fit against auto-fill, and the intrinsic size keywords.

Open the sizing reference