text-overflow: ellipsis在多行下不生效，因其仅支持单行截断；多行需用-webkit-line-clamp并配display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden三条件。
为什么
在多行下完全不生效
本身只定义“溢出时怎么显示”，它不管“有没有溢出”——而是否溢出，由布局行为决定。单行靠
锁住换行、靠
触发裁剪；但多行没有原生机制去“数行数并截断”，所以浏览器直接忽略
的 ellipsis 值（除非你手动加了
等前置条件）。
常见误判：
是“万能省略号开关”，其实它是“被动响应型”属性，必须等布局层先完成截断动作，它才起作用。
必须配齐的三个硬性条件
缺一不可，漏一个就白写：
—— 不能用
、
或
替代，否则
被无视
—— 必须显式声明，不写或写错值（比如
）会导致截断失效
—— 不是可选，是触发裁剪的唯一方式；
在这里只是锦上添花，不是必需（但建议保留，为未来标准兼容留余地）
额外提醒：父容器要有明确高度约束（
或
），否则子元素可能撑开而不触发截断。
立即学习
“
前端免费学习笔记（深入）
”；
Firefox 和旧版 Safari 的兼容性怎么兜底
Firefox 直到 117+ 才支持
，iOS Safari 16.4 之前对
支持不稳定。纯 CSS 方案在这些环境会直接退化为全文显示。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
务实做法是分层处理：
优先用
写法，覆盖 Chrome、Edge、新版 Safari/Firefox
对不支持的环境，用 JS 检测：
降级方案别硬套 height + ::after，容易被字体缩放、zoom、line-height 变动打穿；更稳的是服务端预截断 + 加省略号，或客户端用
（注意中英文字符宽度差异）
Flex 容器里用
为啥经常失效
当文字容器是
子项时，浏览器默认给它分配无限宽度（
），导致
内部无法准确计算行高和行数。
修复只需一行 CSS：
给文字容器加
或
（推荐后者，更通用）
避免同时设
和
，二者冲突会干扰盒模型计算
如果父容器用了
，确认没意外影响子项尺寸（某些旧版 Safari 对 gap + box 混合支持差）
真正麻烦的不是写法，而是“明明代码抄对了却没效果”——八成卡在 flex 布局的隐式尺寸推导上，建议用 DevTools 的 Layout 面板看 computed width 是否为 auto 或 0。
text-overflow: ellipsistext-overflow: ellipsiswhite-space: nowrapoverflow: hiddentext-overflowdisplay: -webkit-boxtext-overflow: ellipsis-webkit-line-clampdisplay: -webkit-boxflexgridblock-webkit-line-clamp-webkit-box-orient: verticalhorizontaloverflow: hiddentext-overflow: ellipsisheightmax-height-webkit-line-clamp-webkit-box-orient-webkit-line-clampif ('webkitLineClamp' in document.documentElement.style) { /* 启用CSS方案 */ }element.textContent.substring(0, n) + '…'-webkit-line-clampdisplay: flexflex-grow: 1-webkit-boxalign-self: flex-startmin-width: 0width: 100%flex: 1gap