text-overflow: ellipsis生效必须同时满足三个条件：white-space: nowrap、overflow: hidden、容器有明确宽度（width或max-width），缺一不可；多行省略需用-webkit-line-clamp等非标准方案，firefox不支持。
单行文本必须加这三行 CSS 才能生效
只写 text-overflow: ellipsis 是没用的，它依赖另外两个前提条件同时成立。缺一不可：
-
white-space: nowrap：强制文本不换行，否则ellipsis不触发 -
overflow: hidden：隐藏溢出内容，这是省略号显示的视觉基础 - 容器必须有明确宽度限制：用
width或max-width，不能是fit-content或未设宽的 flex item
常见错误是给一个 display: flex 的子元素直接加这三条，但父容器没设 flex-shrink: 1 或没限制宽度，导致子元素被撑开、省略号失效。
多行省略号在 Chrome/Firefox/Safari 行为不一致
-webkit-line-clamp 是目前最常用方案，但它不是标准属性，Firefox 直到 2025 年底仍不支持（仅靠 display: -webkit-box 无法 fallback）。实际效果：
- Chrome / Edge / Safari：正常截断并显示省略号
- Firefox：文字照常换行，但最后一行可能被
overflow: hidden截掉半截字，不显示省略号 - 移动端（iOS/Android WebView）：基本可用，因多数基于 WebKit
如果必须兼容 Firefox，得用 JS 动态计算字符数 + substring() 截断，或服务端提前截取。纯 CSS 多行省略号本质是个“尽力而为”的方案，不是可靠 UI 控件。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
text-overflow: ellipsis 在中文和英文场景下表现不同
中英文混排时容易踩坑：英文单词默认不断行，white-space: nowrap 会让整个长英文串顶满容器，哪怕中间有空格；中文则按字断行，所以同样宽度下，中文更容易触发省略。
- 想让英文也按词断行？加
word-break: break-word或overflow-wrap: break-word，但这会破坏单行前提，需配合white-space: normal—— 此时text-overflow: ellipsis就不再适用 - 想保持单行 + 中英文都合理截断？建议统一用
ch或em单位设width，避免像素级错位 - 注意字体差异：等宽字体（如
monospace）下省略位置更可预测；比例字体（如system-ui）受字重、连字影响，同一字符串在不同浏览器里截断位置可能差 1–2 个字符
IE 和旧版 Edge 必须加前缀才能识别 ellipsis
如果你还要支持 IE11 或旧 Edge（≤18），text-overflow 必须写双份：
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
现代项目通常已放弃 IE 支持，但若用在企业内网系统里，漏掉 -ms- 前缀会导致省略号完全不显示，只看到被硬切掉的字。这不是 bug，是历史遗留的解析差异。
真正难处理的从来不是怎么写对这三行 CSS，而是当它嵌在 flex/grid/tables 里，或者被 transform 缩放过，又或者容器本身 width 来自 JS 动态计算时——那些边界情况才容易让省略号突然消失，且很难复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
