HTML5布局如何禁止文本换行_wordbreak与whitespace属性的使用场景【技巧】

text-overflow: ellipsis 必须配合 white-space: nowrap 和 overflow: hidden 才生效，且容器需有明确宽度；white-space: pre/pre-wrap 下该属性无效。

text-overflow: ellipsis 必须配合 white-space: nowrap 才生效

很多开发者发现给元素加了 text-overflow: ellipsis 却没效果，根本原因是它只在「单行强制不换行」的上下文中起作用。必须同时设置 white-space: nowrap，且父容器需有明确宽度（如 width 或 max-width）并设置 overflow: hidden。

常见错误写法：white-space: normal 或 white-space: pre-wrap 下，文本会自然折行，ellipsis 完全不触发。

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

word-break: break-all 和 word-break: keep-all 的适用边界

word-break: break-all 会在任意字符间断行（包括中文、英文、数字），适合纯展示型卡片或日志列表，但对可读性伤害大；word-break: keep-all 则禁止在单词内部断行（中文词组也不拆），更适合标题、按钮等需要语义完整的场景。

注意：word-break: keep-all 在 Chrome/Firefox 中对中文默认行为接近 normal，但在 Safari 中更严格——它真会阻止所有中文字之间的换行，导致超长中文串溢出容器。

• 表格单元格含长 URL？用 word-break: break-all
• 用户昵称或商品标题？优先用 word-break: keep-all + overflow: hidden 配合 text-overflow: ellipsis
• 想兼容 Safari 对中文的处理？加 overflow-wrap: break-word 作为兜底

overflow-wrap: break-word 和 word-wrap: break-word 是同一回事

overflow-wrap 是标准属性名，word-wrap 是旧别名，两者行为完全一致。它的核心逻辑是：仅在「当前行放不下整个单词」时，才在单词内断行（比如一个超长英文单词或 Base64 字符串）。不会像 break-all 那样无差别切分。

典型使用场景是内容不可控的富文本区域，例如用户粘贴的代码片段或 JSON 字段。此时你既不想让长串撑破布局，又希望保留单词完整性。

注意：它对纯中文无效（因为中文没有“单词”概念），所以搭配中文内容时，要靠 white-space: normal 默认换行或 word-break: break-all 强制断字。

white-space 属性值的真实行为差异

white-space 控制空格、换行符和换行策略，但不同值的行为常被误解：

• white-space: normal：合并空白符，允许换行（默认）
• white-space: nowrap：合并空白符，**禁止换行**（哪怕有空格或连字符）
• white-space: pre：保留空白符和换行符，**不自动换行**（类似
  ）
• white-space: pre-wrap：保留空白符和换行符，**允许换行**（最接近「按源码排版但自适应容器」）

特别提醒：pre 和 pre-wrap 下，text-overflow: ellipsis 依然无效——因为多行文本不支持该截断机制。如果需要多行省略，得用 JavaScript 或 -webkit-line-clamp（仅 WebKit 内核）。