单行文本溢出显示省略号必须同时设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis三个CSS属性，缺一不可；仅写text-overflow: ellipsis无效，因其依赖前两者共同构建溢出裁剪上下文。
单行文本溢出省略必须同时设置三个CSS属性
只写 text-overflow: ellipsis 是没用的，它必须和 white-space: nowrap、overflow: hidden 一起生效。缺任何一个，浏览器都不会显示省略号。
原因很简单：white-space: nowrap 让文本“挤”在一行里不换行，overflow: hidden 才会真正裁掉超出部分，text-overflow: ellipsis 只是告诉浏览器“裁掉的地方画个…”，不是独立功能。
-
white-space: nowrap不能换成pre或pre-wrap，否则换行逻辑冲突 -
overflow: hidden不能写成overflow: visible或auto，后者不会触发省略号渲染 -
text-overflow在 Firefox/Chrome/Edge/Safari 中都支持ellipsis，IE 需加-ms-text-overflow: ellipsis
容器宽度不明确会导致省略号完全失效
如果父容器没设宽、或子元素是 display: inline 且没转块级，text-overflow 就像没写一样——浏览器根本不知道“溢出”从哪算起。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 对原生
<span>直接加省略样式：必须先加display: inline-block或display: block - Flex 容器里的子项：默认
min-width: auto会撑开宽度，得显式加min-width: 0 - 表格单元格（
<td>）：需配合table-layout: fixed和明确的width，否则自动布局会忽略white-space - 响应式场景：用
max-width比width更安全，避免小屏下内容被过度压缩
移动端和旧版 Safari 的兼容细节
绝大多数现代浏览器没问题，但两个地方容易翻车：
- iOS Safari ≤ 15.4：需要加
-webkit-text-overflow: ellipsis（仅旧版本，2026 年已基本可忽略） - Android WebView（尤其老版 UC / QQ 浏览器）：
text-overflow可能对flex子项失效，建议包裹一层div并单独设宽 - 内联元素 +
line-height偏大时：省略号位置可能偏高，加vertical-align: bottom或统一用block更稳
不要试图用 JavaScript 模拟单行省略
有人用 getBoundingClientRect() + 字符截断 + 二分查找来“手算”省略位置，这纯属自找麻烦。CSS 原生方案性能好、语义清、无 JS 依赖，只要宽度可控、DOM 结构合理，就足够可靠。
真正该上 JS 的场景只有两个：需要点击展开全文、或必须兼容 IE8 及更老环境（但这种需求 2026 年已极少见）。
