前端Wiki/词条/text-overflow 省略号

text-overflow 省略号

定义让超出一行的文字以省略号（…）截断显示，列表卡片里最常见的单行文本截断方案

单行省略号是三件套：white-space: nowrap（不换行）+ overflow: hidden（溢出隐藏）+ text-overflow: ellipsis（溢出处渲染省略号）。三者缺一不可——少了 nowrap 文字会折行，少了 overflow 内容直接溢出，少了 text-overflow 则是被硬切断而不是省略号。

多行省略号用纯 CSS 也能做：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden。虽然带 -webkit- 前缀，但 Chrome/Safari/Edge/Firefox 现在全都支持，是公开介绍、商品标题两行截断的事实标准。

单行省略号 = nowrap + overflow: hidden + text-overflow: ellipsis
多行省略号用 -webkit-line-clamp，主流浏览器均已支持
省略号只对块级容器内的文本生效，且容器需要有明确宽度或被 flex 约束

HTML

<style>
  .one { width: 220px; white-space: nowrap; overflow: hidden;
         text-overflow: ellipsis; border: 1px solid #e78a3e; }
  .two { width: 220px; display: -webkit-box; -webkit-line-clamp: 2;
         -webkit-box-orient: vertical; overflow: hidden;
         border: 1px solid #4a9eff; }
</style>
<div class="one">单行省略号：这段文字很长，超出容器的部分会用省略号代替。</div>
<div class="two">多行省略号：这段文字很长，超过两行之后会被截断并显示省略号，常用于商品标题、文章摘要等需要控制高度的列表场景。</div>

⚠ 常见误区

只写 text-overflow 不写 nowrap/overflow，省略号不生效
指望省略号自动控制高度：line-clamp 之外的容器高度要自己保证
省略号和 ellipsis 的三个点点是渲染出来的，无法选中复制

🔗 相关词条文本属性 Box 盒模型与溢出