单行文本溢出显示省略号需同时满足：块级元素、固定宽度（或max-width）、white-space: nowrap；缺一不可，否则text-overflow: ellipsis不生效。
单行文本溢出显示省略号，必须同时满足三个条件：块级元素、固定宽度（或 max-width）、white-space: nowrap；缺一不可，否则 text-overflow: ellipsis 不生效。
为什么设置了 text-overflow: ellipsis 却没显示省略号
这是最常见的失效场景。根本原因是浏览器无法判断“何时该截断”——text-overflow 只是“截断后怎么显示”，不负责“是否截断”或“在哪截断”。它依赖父容器的布局行为来触发截断逻辑。
-
display必须是块级（如block、inline-block），inline元素即使设了width也无效 -
width或max-width必须为具体值（如200px、50%），auto或未设置等于放弃控制权 -
white-space: nowrap是关键：它阻止换行，迫使文本在一行内撑开，才能和width形成“溢出”事实 -
overflow: hidden必须显式声明，否则溢出内容仍可见，ellipsis失去作用对象
text-overflow 在 Flex 布局中失效怎么办
Flex 项默认会收缩（flex-shrink: 1），即使写了 width: 200px，也可能被压缩导致未真正溢出；或者父容器未限制主轴尺寸，子项无限伸展。
- 给文本容器加
flex-shrink: 0，防止被压缩 - 确保其父
display: flex容器有明确主轴约束，例如父容器设width，或文本项用flex: 0 0 200px - 若需响应式，优先用
max-width而非width，避免小屏下强制截断 - 不要依赖
flex-basis: auto配合text-overflow，它由内容决定宽度，无法触发溢出
多行文本省略号不能只靠 text-overflow
text-overflow: ellipsis 仅支持单行。实现多行省略必须组合其他 CSS 属性，且存在浏览器兼容差异。
- 现代方案（Chrome 99+、Firefox 98+、Safari 16.4+）：
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical+overflow: hidden - 该方案仍需
height或max-height配合，否则-webkit-line-clamp不生效 - 无 WebKit 前缀的纯标准方案尚不存在；
line-clamp（无前缀）目前仅草案阶段，不可用于生产 - 服务端截断或 JS 动态计算仍是跨浏览器最稳妥的多行省略手段
字体、缩放与视口变化引发的省略异常
省略号表现高度依赖渲染时的像素级测量，以下情况会导致意外失效：
- 用户缩放页面（Ctrl+/-）可能让本该溢出的文本刚好卡在临界点，省略号时有时无
- 使用可变字体（variable font）或字体加载延迟时，初始渲染宽度 ≠ 最终宽度，
text-overflow按初始状态计算 - 响应式单位（如
rem、vw）在视口缩放或根字体变化时，width和文本宽度比例偏移，导致截断位置漂移 - 解决思路：对关键文本容器监听
resize或fontload，必要时强制重排（如修改visibility）
真正麻烦的不是写对那几行 CSS，而是当它在某个设备、某种缩放比例、某次字体加载时机下突然不工作——这时候得回到盒子模型本质：检查每一层的 display、width 计算值、white-space 继承链，以及是否被 Flex/Grid 的隐式行为悄悄覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
