text-overflow: ellipsis 必须同时满足三个条件才生效：width（或max-width）设为具体值、white-space: nowrap、overflow: hidden；缺一不可。
text-overflow: ellipsis 必须配合哪些CSS属性才生效
单独写 text-overflow: ellipsis 没用，浏览器直接忽略。它是个“依赖型”属性，只在特定布局条件下起作用。
必须同时满足三个条件：
-
width（或max-width）明确设为具体值（如200px），不能是auto或百分比未被约束的父容器 -
white-space: nowrap，强制单行不换行 -
overflow: hidden，隐藏溢出内容（ellipsis本质是 overflow 的一种视觉修饰）
缺一不可。常见错误是只写了 text-overflow 和 width，但忘了 white-space，结果文字照常换行，截断完全不出现。
为什么flex或grid容器里text-overflow经常失效
Flex 项默认会拉伸（flex: 1 或 flex-grow: 1），导致实际宽度不受 width 控制；Grid 项若没设 min-width: 0，也会因内部文本撑开而突破限制。
解决方法很直接：
- Flex 子项加
min-width: 0（让宽度计算尊重width） - Grid 子项同样加
min-width: 0，或显式设overflow: hidden（触发 BFC） - 避免对子元素用
flex: 1同时又期望它守width
示例：.item { flex: 1; width: 150px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
多行文本截断\_纯CSS方案的现实限制
text-overflow: ellipsis 原生只支持单行。想截两行或三行？没有标准属性能直接替代。
目前可靠做法只有两种：
- CSS
line-clamp（需display: -webkit-box+-webkit-line-clamp），但仅 Chrome/Safari/Edge 支持，Firefox 不支持（截至 2024） - JavaScript 计算截断（如用
element.textContent+ canvas 测量宽度），适合对兼容性要求高、且文本不频繁更新的场景
别试 height + overflow: hidden 加伪元素模拟省略号——无法精准对齐末尾字符，换行位置不可控，移动端尤其容易错位。
中英文混排时ellipsis位置偏移\_font-family的影响
中文字符和英文字母宽度不同，某些字体（如 system-ui 或未指定 fallback 的 sans-serif）在不同系统上渲染宽度浮动，会导致省略号挤进最后一个字中间，或者留出奇怪空隙。
稳定做法：
- 显式声明等宽或已知行为稳定的字体栈，例如：
font-family: "Segoe UI", system-ui, sans-serif - 避免用
font-feature-settings或font-variant-ligatures开启复杂连字，它们可能干扰宽度计算 - 如果用 Web Font，确保
font-display: swap不会导致截断状态闪烁（可先设visibility: hidden，加载完成再显示）
最易被忽略的是：哪怕所有 CSS 都写对了，只要字体加载延迟或 fallback 失败，text-overflow 就可能临时失效一次，之后不再恢复——得靠 JS 监听 fontload 重触 layout。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
