How to handle long words and text overflow with CSS?

使用overflow-wrap: break-word可安全折行长单词，仅在必要时断词；word-break: break-all强制任意位置断字，适用于技术场景；text-overflow: ellipsis需配合white-space: nowrap和overflow: hidden实现省略。

How to break long words with word-break

When a single word (like a URL or hex string) is longer than its container, it overflows instead of wrapping — even with white-space: normal. The most direct fix is word-break: break-all, which forces breaks *anywhere* in the word, including mid-letter. Use it only when you’re sure breaking arbitrary characters is acceptable — e.g., log displays or technical IDs.

But beware: word-break: break-all doesn’t respect syllables or grapheme boundaries, and it’ll split words like "hello" into "hel" "lo" if needed. For languages like Chinese or Japanese, prefer word-break: break-word (deprecated alias) or better yet, overflow-wrap: break-word.

• word-break: normal → respects word boundaries, no forced breaks
• word-break: break-all → breaks anywhere, even within ASCII letters
• word-break: keep-all → prevents breaks in CJK text (useful for Chinese/Japanese)

When overflow-wrap is safer than word-break

overflow-wrap (formerly word-wrap) only breaks a line *if there’s no other option* — i.e., when an unbreakable word would overflow. It tries normal wrapping first, then inserts a break *between words* or, as fallback, *inside* a long word. That makes it more predictable for mixed-content paragraphs.

This property works well with hyphens: auto for English, but note: hyphens requires lang attribute and browser support varies (Safari needs -webkit-hyphens).

• Set overflow-wrap: break-word on the container (not inherited by default)
• Avoid combining it with word-break: break-all — they compete and behavior becomes inconsistent
• Doesn’t affect text in pre or textarea unless explicitly styled

Prevent overflow without breaking words: text-overflow white-space

If your goal isn’t wrapping but *clipping* overflowing text (e.g., file names in a narrow table cell), use text-overflow: ellipsis. But it only works under three strict conditions: the element must have white-space: nowrap, overflow: hidden, and a fixed width (or max-width).

For multi-line ellipsis, CSS still lacks a clean native solution. You’ll need display: -webkit-box with -webkit-line-clamp, but that’s WebKit-only and unreliable for dynamic content.

• text-overflow: clip hides overflow silently; ellipsis adds "…"
• white-space: nowrap disables line breaks entirely — don’t use it if wrapping is desired
• Flex or grid containers may need min-width: 0 on children to allow overflow: hidden to take effect

Real-world example: A responsive code snippet display

Here’s how to safely render a long base64 string or CLI command in a narrow card without breaking layout or readability:

code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

Note: pre-wrap preserves intentional line breaks and spaces while allowing wrapping. overflow-x: auto ensures horizontal scrolling remains available if wrapping fails — a practical fallback. Don’t rely solely on break-all for user-facing prose; test with real data, especially non-Latin scripts or emoji sequences, where grapheme clusters can break unexpectedly.

The above is the detailed content of How to handle long words and text overflow with CSS?. For more information, please follow other related articles on the PHP Chinese website!