CSS Text Effects: text-overflow, word-break and overflow-wrap

CSS text effects control what happens when text doesn't fit. Learn text-overflow ellipsis, word-break, overflow-wrap, every white-space value, and how to stop long URLs breaking cards.

Why text overflows its box

Most of the time, text wraps neatly onto new lines at spaces. Problems start when text can't wrap: a very long word, a URL like https://example.com/articles/2026/how-to-build-a-website, or a line you've told not to wrap. The text then sticks out of its box and can break your layout, especially on phones.

CSS gives you four tools for this: text-overflow, overflow-wrap, word-break and white-space.

text-overflow: ellipsis in depth

You met the ellipsis briefly in the Overflow lesson. text-overflow decides how hidden text is shown at the cut-off point. ellipsis shows three dots (...), which tells readers "there's more". It needs three helpers to work:

• white-space: nowrap keeps the text on one line.
• overflow: hidden hides what doesn't fit.
• A limited width (a set width or max-width, or a width from flex or grid).

<ul class="inbox">
  <li>
    <img src="https://picsum.photos/id/1005/80/80" alt="">
    <div class="message">
      <strong>Maria Chen</strong>
      <p class="preview">Hi! I wanted to check if you are still free for the meeting on Thursday afternoon, because the client asked to move it.</p>
    </div>
  </li>
</ul>

.inbox li {
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: 420px;
}

.inbox img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.message {
  min-width: 0;
}

.preview {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
}

You'll see an email-style list item: a round photo, a name, and a one-line message preview that ends with "..." where it runs out of space. The key line is min-width: 0 on .message. Flex items refuse to shrink smaller than their content by default, so without it the long line would push the item wider and no ellipsis would appear.

Common mistake: Adding text-overflow: ellipsis and seeing nothing happen. Check the three helpers: nowrap, overflow: hidden, a limited width. Inside flexbox or grid, also add min-width: 0 to the item.

For an ellipsis after two or three lines instead of one, use line-clamp, which is covered in the Modern Text Styling lesson.

overflow-wrap: breaking long words

overflow-wrap (its old name is word-wrap) tells the browser it may break a long word in the middle, but only if the word doesn't fit on a line by itself. Normal words still wrap at spaces as usual.

Value	What it does
normal	Words only break at normal break points. Long words overflow.
break-word	A word that doesn't fit is broken onto the next line.
anywhere	Same visible result, but the box's minimum size also shrinks, so it works inside flex items and table cells that would otherwise grow.

Long URLs in cards

This is the most common real-life problem: a user pastes a long link into a comment or profile card.

<div class="card">
  <h3>Shared link</h3>
  <p>Check this out: https://www.example.com/blog/2026/the-complete-guide-to-learning-css-from-scratch-for-beginners</p>
</div>

.card {
  max-width: 260px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.card p {
  overflow-wrap: anywhere;
}

Without the rule, the URL would stick out of the card on the right. With overflow-wrap: anywhere, the URL breaks wherever needed and stays inside the card, while normal words like "Check this out" still wrap only at spaces. Many developers put overflow-wrap: break-word; on body so this never happens anywhere on the site.

Tip: overflow-wrap is the polite option: it only breaks words when there is no other choice. Reach for it first, and use word-break only when you have a special reason.

word-break: break-all and keep-all

word-break is stronger. It changes where lines are allowed to break, for all words.

Value	What it does
normal	The default rules for the language.
break-all	Breaks any word at any letter to fill each line completely, even short words that would fit on the next line.
keep-all	Doesn't break inside words in Chinese, Japanese and Korean text (CJK); acts like normal for other languages.

.hash {
  font-family: monospace;
  word-break: break-all;
  background: #f1f5f9;
  padding: 8px;
}

This is useful for things that aren't real words, like a long code or file checksum such as a3f9c2e81b7d4f6092ce5a1b8d3e7f40. It fills every line edge to edge. For normal text, break-all looks messy, because it splits words like "beauti-ful" without any hyphen.

Hyphens: If you want proper hyphenated breaks in normal text, use hyphens: auto together with a lang attribute on the <html> tag. The Modern Text Styling lesson explains it in detail.

white-space values

white-space controls two things: whether spaces and line breaks in your HTML source are kept, and whether text wraps.

Value	Keeps extra spaces?	Keeps line breaks from source?	Wraps lines?
normal	No	No	Yes
nowrap	No	No	No
pre	Yes	Yes	No
pre-wrap	Yes	Yes	Yes
pre-line	No	Yes	Yes
break-spaces	Yes (and spaces can wrap)	Yes	Yes

<p class="poem">Roses are red,
   violets are blue,
CSS is tricky,
   but you'll get through.</p>

.poem {
  white-space: pre-line;
  font-style: italic;
}

The poem keeps its four line breaks exactly as you typed them in the HTML, but the extra spaces at the start of some lines are removed. With pre-wrap, those spaces would be kept too. nowrap is great for short labels and buttons that should never split, like a price "19.99 EUR".

Practice exercise

Build a "file list" with three rows. Each row has an icon, a long file name like final-project-presentation-version-7-really-final.pdf, and a file size. Make the name end with an ellipsis on one line, keep the file size from wrapping with nowrap, and add a comment box below that keeps long URLs inside it.

Hint: the file name sits in a flex row, so remember min-width: 0 on its container.

Key takeaways

• An ellipsis needs white-space: nowrap, overflow: hidden, a limited width, and min-width: 0 inside flex or grid.
• overflow-wrap: anywhere or break-word breaks long words and URLs only when they don't fit.
• word-break: break-all breaks anywhere; use it for codes and hashes, not normal text.
• white-space controls spaces, source line breaks and wrapping; pre-line and pre-wrap keep line breaks.
• For hyphenation use hyphens: auto with a lang attribute.