text-overflow: ellipsis 必须配合 overflow: hidden 和 white-space: nowrap 才生效，且容器需有明确宽度；它仅支持单行省略，多行需用 -webkit-line-clamp；省略号为 U+2026 字符，非三个英文句点。
text-overflow: ellipsis 必须配合 overflow: hidden 和 white-space: nowrap
单独写 text-overflow: ellipsis 没用，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：当文字被截断时，显示省略号”，但前提是得先有截断行为。
常见错误现象：text-overflow 写了，文字依然换行或撑开容器，没出现 …。
- 必须同时设置
overflow: hidden（否则文字溢出后直接显示） - 必须设置
white-space: nowrap（否则文字在空格处自动换行，根本不会溢出到单行末尾） - 容器需有明确宽度（
width、max-width或受父容器约束），否则无法判断“哪里算溢出”
多行文字省略不能只靠 text-overflow
text-overflow: ellipsis 原生只支持单行。想实现两行、三行省略？CSS 没有 line-clamp 以外的可靠方案——而 line-clamp 是 -webkit- 前缀属性，依赖 Flex 或 Block 布局配合。
使用场景：卡片标题、列表摘要等需要固定行数截断的地方。
- 现代写法（推荐）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;，再加overflow: hidden - 注意：
-webkit-line-clamp在 Firefox 中不生效（需 JS 回退）；Safari 17+ 支持无前缀line-clamp，但兼容性仍弱 - 不要试图用
height + overflow: hidden强切，字体渲染差异会导致截断位置不准，可能砍掉半行字
中文/中英文混排下 width 计算容易误判
设置 width: 200px 后发现有些文字刚好多出一个字才省略，有些却早早就省略了——这不是 bug，是字体度量和浏览器渲染的正常表现。
原因在于：ch、em、像素单位都依赖字体实际字宽，而中文字体（如 PingFang SC、Noto Sans CJK）每个字占位接近等宽，但标点、英文字母、数字宽度差异大；更麻烦的是，某些字体里全角空格、破折号、省略号（…）本身也占不同宽度。
- 避免用
ch单位控制中文省略（1ch≈ 一个“0”的宽度，对中文意义不大） - 优先用
px或rem配合设计稿基准，再通过真实数据测试临界点 - 如果内容来自用户输入，且长度波动大，建议服务端或 JS 预截断（比如限制 30 字符），再用 CSS 做兜底
省略号本身不是“三个点”，而是 Unicode 字符 U+2026
很多人以为 text-overflow: ellipsis 就是插入三个英文句点 ...，其实不是。它插入的是标准省略号字符 …（U+2026），宽度更紧凑，语义更准确。
这个细节影响两点：一是复制文本时粘贴出来是 … 而非 ...；二是如果字体缺失该字符（极少见），会 fallback 成三个点或方框。
- 不需要手动写
content: "…"或 JS 替换，text-overflow自动处理 - 若需自定义符号（比如用
»或[...]），只能用 JS 截断 + 插入，CSS 无此能力 - 注意：某些旧版 Android WebView 对 U+2026 渲染异常，但 iOS 和主流桌面浏览器均无问题
事情说清了就结束。最常漏的是 white-space: nowrap 和 overflow: hidden 的组合，光写 text-overflow 等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
