PHASE 4Beginner ~26 min· topic 5 of 6

Topic 4.5

Long Text: Wrapping and Overflow

In one line

white-space decides whether spaces and line breaks are kept and whether lines wrap, overflow-wrap, word-break and hyphens decide how long words break, and text-overflow: ellipsis and line-clamp cut text that doesn't fit with a ….

Think of it like this

Writing on a narrow sticky note. Normally you start a new line when you reach the edge (wrapping). A very long word, like a web address, doesn't fit on one line at all, so you either break it in the middle (breaking words), add a hyphen (hyphenation), or write as much as fits and finish with "…" (ellipsis). Sometimes you only have room for three lines, so you stop there (line clamping).

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Wrapping: Moving the rest of the text to a new line when it reaches the edge of its box.
Soft wrap opportunity: A place where the browser is allowed to wrap, usually a space or a hyphen.
Overflow: Content that is too big for its box and sticks out of it.
Collapse (spaces): Turning many spaces or line breaks in a row into one space.
Hyphenation: Breaking a word between syllables and adding a hyphen (-) at the end of the line.
Soft hyphen: : an invisible marker in a word that says "you may break here with a hyphen".
Ellipsis: The three-dot character … that shows text was cut off.
Line clamping: Showing only the first few lines of a text and cutting the rest.

Step by step

01See the problem

A long URL in a narrow card has nowhere to wrap, so it sticks out of the card and may push the page sideways on a phone.

index.htmlwhole filehtml

<p class="card">Visit https://example.com/a/very/long/path/that/never/stops/for/a/space</p>

02Allow emergency breaks

overflow-wrap: anywhere breaks the URL only where it doesn't fit; normal words still wrap at spaces. Many teams set it on body so user content can't break the layout.

style.csswhole filecss

.card {
  overflow-wrap: anywhere;
}

03Hyphenate long prose words

For long words in narrow columns, let the browser hyphenate. It needs the page language.

style.csswhole filecss

/* with <html lang="en"> */
article {
  hyphens: auto;
}

04Cut one line with an ellipsis

For a file name or a title in a list, keep one line and show … at the end. All four properties are needed.

style.csswhole filecss

.file-name {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cut one line with an ellipsisdiagram

Rendering diagram…

05Clamp to a few lines

For a card description, show three lines and cut the rest with ….

style.csswhole filecss

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

06Keep the source's spacing when it matters

For poems, addresses or user-typed messages, white-space: pre-line keeps the line breaks people typed while still wrapping long lines. Chat apps often use pre-wrap.

style.csswhole filecss

.message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

Try it yourself

1
Remove one ingredient
In the third example, delete white-space: nowrap; from .title. Predict what happens before running. The title wraps onto two lines and the ellipsis disappears, because nothing overflows sideways any more.
2
Change the clamp
Change -webkit-line-clamp to 2, then 5. Predict the visible lines value each time.
3
Spot the difference
In the second example, give .b and .c a width of 300px. anywhere now breaks only the URL part that doesn't fit; break-all still breaks wherever the line ends.

Code & diagrams

white-space values compared New tab

Only the values that never wrap (`nowrap`, `pre`) stick out of the box. Look at which ones keep the extra spaces and the source line break.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

normal overflows: false
nowrap overflows: true
pre overflows: true
pre-wrap overflows: false
pre-line overflows: false

Breaking long words New tab

`anywhere` breaks only the URL, after putting the label on its own line; `break-all` breaks right where the line ends, even mid-word. The last box hyphenates at syllables, if your browser has an English dictionary.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

normal overflows: true
anywhere overflows: false
break-all overflows: false

One-line ellipsis and a three-line clamp New tab

`scrollWidth > clientWidth` is the usual JavaScript test for "is this text truncated?", for example to show a tooltip only when needed.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

title is cut: true
visible lines: 3
full text still in the DOM: true

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Ellipsis without nowrap

Give a title overflow: hidden; text-overflow: ellipsis; but no white-space: nowrap.

terminal

$ the page shows

── what you'll see ──

The title wraps onto several lines. No … appears anywhere.

Break #2

Ellipsis inside a flex item

Put the truncating .title inside a display: flex row next to an icon.

terminal

$ the page shows

── what you'll see ──

The title doesn't truncate; it pushes the row wider than the card and overflows.

Break #3

Using word-break: break-all on prose

Set body { word-break: break-all; } to stop URLs overflowing.

terminal

$ the page shows

── what you'll see ──

Ordinary words split at random letters at the end of lines, like "impor / tant", all over the page.

Myth vs fact

Myth

text-overflow: ellipsis works on its own.

Fact

It needs overflow in the inline direction: a limited width, white-space: nowrap and overflow other than visible.

Myth

-webkit-line-clamp only works in Chrome and Safari.

Fact

Firefox supports the -webkit- version too. It's the cross-browser way to clamp lines today.

Myth

word-wrap and overflow-wrap are different properties.

Fact

word-wrap is the legacy name of overflow-wrap; browsers treat it as an alias.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Line breaking follows Unicode's line-breaking algorithm (UAX #14) plus CSS Text rules. line-break: strict | loose | anywhere adjusts CJK punctuation rules, and <wbr> in HTML adds a break opportunity without a hyphen, handy inside long URLs.
▸
overflow-wrap: anywhere affects the element's min-content size (break points count when sizing); break-word doesn't. So in a table cell or a flex/grid item sized to content, only anywhere lets the box shrink. word-break: break-word is a deprecated alias for normal + overflow-wrap: anywhere.
▸
text-wrap: balance evens out line lengths in short headings, and text-wrap: pretty avoids a single word alone on the last line of paragraphs. Both are newer: balance works in all major browsers, pretty is still arriving in some; they degrade gracefully, so it's safe to add them.
▸
Hyphenation dictionaries vary by browser and OS. Chrome ships dictionaries for many languages on all platforms; results differ between browsers, so never rely on exact break positions in tests or designs.

Remember this

1
The browser wraps text only at soft wrap opportunities: mostly spaces and hyphens (and between characters in languages like Chinese and Japanese). A long word with no spaces, such as a URL or Supercalifragilisticexpialidocious, has none, so it sticks out of its box. Text that doesn't fit its box is called overflow.
2
white-space controls spaces, line breaks and wrapping. normal collapses runs of spaces into one, ignores line breaks in the source and wraps. nowrap collapses spaces but never wraps. pre keeps every space and line break exactly and doesn't wrap (like <pre>). pre-wrap keeps spaces and line breaks and wraps. pre-line collapses spaces but keeps line breaks, and wraps. break-spaces is like pre-wrap, but trailing spaces take up room and can wrap.
3
overflow-wrap (old name word-wrap) lets the browser break a long word only if it would otherwise overflow: break-word or anywhere. Normal words still wrap at spaces. The two differ in sizing: anywhere lets the box shrink to the broken width (it counts for min-content), break-word doesn't. word-break: break-all is more aggressive: it may break any word at any letter, even short ones, which suits code or long IDs, not prose. word-break: keep-all stops breaks between Chinese, Japanese and Korean characters.
4
hyphens: auto lets the browser break words at the right syllable and add a hyphen, using a dictionary for the page's language. It only works when the element has a lang (for example <html lang="en">) and the browser has a dictionary for it. hyphens: manual (the default) breaks only where you put a soft hyphen  in the HTML; none never hyphenates.
5
To cut a single line with …, four things are needed together: a limited width (a block box with a width or a parent that limits it), white-space: nowrap (stay on one line), overflow: hidden (hide what sticks out) and text-overflow: ellipsis (draw … at the cut). text-overflow alone does nothing.
6
To cut after several lines, use line clamping: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. Despite the -webkit- prefix, this works in every modern browser, including Firefox, and is the standard way today. The unprefixed line-clamp property is specified but not yet widely supported. Cut text is still in the page, so screen readers and search read all of it; give users a way to see the full text if it matters.

Explain it without notes

Compare white-space: normal, nowrap, pre, pre-wrap and pre-line.

What is the difference between overflow-wrap: anywhere and word-break: break-all?

What four things are needed for a single-line ellipsis, and why each?

How do you clamp text to three lines, and what accessibility point should you keep in mind?

Practice

Make .chat-message keep the line breaks and spaces the user typed, wrap long lines, and never let a long link stick out.

Make .filename show a single line, at most 180px wide, ending with … when the name is too long.

Clamp .excerpt to two lines.

Trade-offs

↔
Truncating keeps cards tidy and equal in height but hides information; wrapping shows everything but makes layouts uneven.
↔
hyphens: auto gives even text edges in narrow columns but break positions vary by browser; overflow-wrap is predictable but only helps very long words.

Done when you can

I can pick the right white-space value for prose, code and user-typed text.
I can stop long URLs overflowing with overflow-wrap.
I know when word-break: break-all is appropriate and when it isn't.
I can turn on hyphenation and know it needs lang.
I can write a single-line ellipsis and a multi-line clamp.
I can test in JavaScript whether text is truncated.

Command Palette

Words you'll meet

Step by step

01See the problem

02Allow emergency breaks

03Hyphenate long prose words

04Cut one line with an ellipsis

05Clamp to a few lines

06Keep the source's spacing when it matters

Try it yourself

Remove one ingredient

Change the clamp

Spot the difference

Code & diagrams

Break it on purpose

Ellipsis without nowrap

Ellipsis inside a flex item

Using word-break: break-all on prose

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can