text-overflow: ellipsis 看似简单，但真正决定省略号是否出现的往往不是它自己。该属性只负责在文本溢出时把结尾渲染成三个点，而溢出的判定、是否允许换行、容器宽度如何计算，则由 overflow、white-space 和盒模型共同决定。因此很多样式表里即使写了 text-overflow，也会因为缺少相邻属性而完全看不到效果。
一、单行省略号：三个属性缺一不可
单行文本截断的经典写法只有三条声明，但它背后对应着不同的职责。text-overflow 只控制溢出时显示什么，默认值是 clip，也就是直接切断；改成 ellipsis 后才显示为三个点。真正让文本具备单行溢出条件的，是 white-space: nowrap 和 overflow: hidden。前者禁止文本换行，后者把超出容器边界的内容裁剪掉。少了任意一条，省略号都不会出现。
.single-line {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}这里还必须有一个明确的宽度约束。块级元素在没有设置 width 或 max-width 时，宽默认等于父容器内容宽度，文本很可能完整显示而不会溢出。如果容器本身由内容撑开，即使写了上述属性，也不会出现省略号。因此在实际项目中，建议使用 max-width 替代固定 width，这样既能保证容器在小屏幕上收缩，又能在大屏幕上不过度拉伸。
行内元素的处理要多一步。span 等行内元素默认不能直接应用宽度，也不会因为 overflow: hidden 裁剪内容。需要把它设置为 display: inline-block 或 display: block，并给出宽度或最大宽度。下面是一个在标题列表中常见的 span 省略写法，vertical-align: bottom 用来保持与相邻文本的基线对齐。
span.ellipsis {
display: inline-block;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}还需要注意，text-overflow 并不作用于直接的文本节点，而是作用于块级容器内部的内联内容。因此应该把省略样式挂在包裹文本的元素上，而不是试图让它直接对某个文本片段生效。这个细节在组件库封装时尤其重要，外层容器设置 overflow 和内层元素设置 text-overflow，效果可能完全不同。
二、多行文本截断：-webkit-line-clamp 与兼容方案
多行文本需要在指定行数后显示省略号，标准属性 line-clamp 已经进入浏览器草案阶段，目前生产环境最稳定的仍然是通过 -webkit-line-clamp 配合旧的弹性盒语法实现。核心代码如下，其中 display: -webkit-box 是 WebKit 老版本的盒子模型，-webkit-box-orient 控制子元素排列方向，vertical 表示垂直排列，-webkit-line-clamp 用来限制显示行数。
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}这套写法在现代 Chrome、Edge、Safari 以及较新版本的 Firefox 中都能正常工作。不过它有一个比较明显的副作用：display: -webkit-box 会改变元素自身的布局模式，如果这个元素同时参与外部的 flex 或 grid 布局，可能会影响宽高计算。因此更推荐把多行截断放在一个独立的内部容器上，而不是直接在 flex 子项上设置这套旧盒模型。
对于需要兼容更旧浏览器的项目，可以使用 max-height 配合 line-height 的方式模拟两行截断。原理是精确控制行高，再用最大高度裁掉多余行。为了视觉上补齐省略号，可以叠加一个绝对定位的伪元素。下面示例中 max-height 是 3.2em，等于 line-height 1.6 乘以两行。伪元素的背景色需要与容器背景一致，这是该方案最大的局限。
.fallback-clamp {
position: relative;
line-height: 1.6;
max-height: 3.2em; /* 两行高度 */
overflow: hidden;
}
.fallback-clamp::after {
content: '...';
position: absolute;
right: 0;
bottom: 0;
background: #fff;
padding-left: 4px;
}这种模拟方案无法自动感知文本是否真的超出行数，如果文本本身只有一行，右侧仍然会显示伪元素省略号。解决方法是依靠 JavaScript 测量实际高度后动态添加类名，但这会增加维护成本。整体来看，现代浏览器优先使用 -webkit-line-clamp，旧浏览器再考虑 max-height 兜底，是性价比较高的策略。
三、常见失效场景：flex、table 与内部元素干扰
flex 布局中省略号失效是最常见的问题之一。原因在于弹性项默认的 min-width 是 auto，意味着即使容器被压缩，弹性项也不会小于其内容的最小宽度。文字会强制撑开子项，overflow: hidden 看起来像没有生效。解决方式是为弹性项显式设置 min-width: 0，允许它收缩到比内容宽度更小。
.flex-item {
flex: 1;
min-width: 0;
}
.flex-item .ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}表格单元格的省略号处理也容易踩坑。默认的自动表格布局会根据内容分配列宽，即使给 td 设置了 width 和 overflow: hidden，内容仍可能把列撑宽。需要给 table 设置 table-layout: fixed，并在 td 上同时设置裁剪和换行限制。table-layout: fixed 会让浏览器按照表格宽度和第一行单元格宽度进行固定布局，此时单元格的 overflow 才能实际控制溢出。
table {
table-layout: fixed;
width: 100%;
}
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}如果内部有嵌套元素，比如文本被包在 span 或 a 标签里，则可能需要在最内层实际承载文字的节点上设置省略样式。外层容器设置 overflow: hidden 只能裁剪，不会自动给内部文字加省略号。以按钮或链接为例，当文本节点和图标混排时，建议把文字单独抽成一个 span，再对这个 span 应用单行省略。否则省略号可能出现在错误位置，甚至被图标遮挡。
四、实际应用建议与可访问性考量
视觉上的省略号只是 CSS 渲染结果，DOM 中的文本仍然是完整的。用户在页面上选中复制内容时，复制得到的是全部文本，而不是被截断后的部分。这个特性对数据完整性有利，但也带来一个问题：展示给用户的只有片段，不看原文会造成信息缺失。因此可以在容器上添加 title 属性，鼠标悬停时显示完整文本。不过 title 对触屏和键盘用户并不友好，更推荐在邻近位置提供详情入口或弹层。
<div class="ellipsis" title="这是一段很长的文件名，需要在窄容器中省略显示"> 这是一段很长的文件名，需要在窄容器中省略显示 </div>
如果后端接口直接返回截断后的字符串，虽然前端省事，但会造成数据丢失，影响后续编辑、搜索和 SEO。更合理的做法是后端保留完整字段，前端根据展示需求进行 CSS 截断。这样列表页可以用省略号保证整洁，详情页仍然能读取完整内容。对组件库来说，省略文本最好作为可选能力，而不是默认修改原始数据结构。
随着 line-clamp 标准逐步落地，未来多行截断的写法会趋于统一。但目前在生产代码中仍建议同时书写带 -webkit- 前缀的属性，以覆盖不同内核的浏览器。整体原则可以总结为：单行截断优先使用 text-overflow，多行截断优先使用 -webkit-line-clamp，遇到 flex 或 table 容器时先解决盒模型问题，再处理省略样式。这样就能避免绝大多数文本溢出破坏版面的情况。
CSS 省略号text-overflow多行文本截断修改时间：2026-10-06 22:42:03