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 内核）。
