text-overflow: ellipsis 仅对块级或内联块级元素生效，需同时满足 white-space: nowrap、overflow: hidden 和明确宽度；多行截断依赖非标准的 -webkit-line-clamp；中英文混排需用 overflow-wrap: break-word 防撑破；伪元素与 ellipsis 共存时应避免样式冲突。
text-overflow: ellipsis 只对块级元素生效
直接给 <span></span> 或 <a></a> 加 text-overflow: ellipsis 不会生效，因为这个属性依赖三个前提条件同时满足：内容必须是单行、必须有明确宽度（width 或 max-width）、必须设为 overflow: hidden，且元素得是块级或内联块级。最常漏掉的是把 display 改成 block 或 inline-block。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: block最稳妥，尤其在<div> 里；若需保持行内流布局，改用 <code>display: inline-block - 别只写
text-overflow: ellipsis，完整三件套必须一起上：white-space: nowrap+overflow: hidden+text-overflow: ellipsis - Flex 容器里的子项默认不收缩，加
min-width: 0或overflow: hidden才能触发截断 - 必须配合
display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden才能工作 - Firefox 用户看到的是整段文字撑开容器，不是省略号——如果必须兼容，得用 JS 计算行高 + 截字符串 + 补
... -
line-clamp的数值是“最多显示几行”，不是“截到第几行”，所以line-clamp: 2表示最多两行，超出就截 - 加
word-break: break-all强制断词，但会把单词从中间劈开（如useC...），影响可读性 - 更推荐
overflow-wrap: break-word（等价于word-wrap: break-word），只在必要时才断英文单词，优先保留完整词 - 对代码类文本（如路径
/api/v1/users/:id），可加hyphens: auto配合lang="en"实现连字符断行，但支持度有限 - 避免在同一个元素上既用
text-overflow又用::after—— 把图标提到父容器里，用绝对定位覆盖右上角 - 如果必须共存，把
::after设为position: absolute，并确保父容器position: relative且padding-right留出空间 -
text-overflow只作用于「内容区」，不控制伪元素，这点容易误以为是 bug
多行文本溢出用 -webkit-line-clamp 不是标准属性
-webkit-line-clamp 是 WebKit 内核私有属性，Chrome、Safari 支持好，Firefox 和旧版 Edge 完全不认。它本质是 display: -webkit-box 的配套语法，不是 CSS 标准，未来可能被弃用，但目前没有等效的标准替代方案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
英文单词和中文混排时 overflow 常被撑破
中英文混排下，浏览器默认不会在英文单词中间换行，即使容器很窄，一个长 URL 或技术名词（比如 useCallback）也可能直接撑破 width，导致 text-overflow 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
伪元素 ::after 覆盖 ellipsis 时样式错乱
有些组件库或自定义样式会在文本后加 ::after 插入图标或标记，一旦和 text-overflow: ellipsis 同时存在，::after 可能被裁掉，或者省略号位置偏移，甚至完全不显示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是写法本身，而是不同浏览器对 white-space 和 inline 元素尺寸计算的细微差异，还有 Flex/Grid 布局下 min-width 默认值带来的隐式干扰。这些地方一动，省略号就消失，得一层层查渲染树。
