CSS实现多行文本溢出末尾显示省略号（替代单行方案）

Hey there! 要实现两行或三行文本溢出后显示省略号，咱们可以用CSS的-webkit-line-clamp属性来搞定，这是目前最简洁高效的方案，下面给你详细拆解：

核心CSS方案（支持两行/三行） #

这个方案依赖webkit内核的属性，现在绝大多数现代浏览器（Chrome、Edge、Safari、移动端浏览器等）都支持，代码非常简洁：

/* 两行文本溢出省略 */
.two-line-ellipsis {
  width: 500px; /* 固定宽度，根据你的需求调整 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  display: -webkit-box; /* 将元素转为弹性伸缩盒子模型 */
  -webkit-box-orient: vertical; /* 设置盒子内内容垂直排列 */
  -webkit-line-clamp: 2; /* 限制显示的行数为2 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

/* 三行文本溢出省略 */
.three-line-ellipsis {
  width: 500px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里改成3就是三行限制 */
  text-overflow: ellipsis;
}

属性作用说明 #

• display: -webkit-box：必须设置，让元素成为弹性盒子，是-webkit-line-clamp生效的基础
• -webkit-box-orient: vertical：指定内容垂直排列，没有这个属性，-webkit-line-clamp无法正确限制行数
• -webkit-line-clamp: N：N就是你需要限制的行数，直接修改数字就能切换两行/三行/更多行
• overflow: hidden：把超出指定行数的内容隐藏起来
• text-overflow: ellipsis：给溢出的末尾加上省略号，完成最终效果

HTML使用示例 #

<!-- 两行省略效果 -->
<div class="two-line-ellipsis">
  The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II.
</div>

<!-- 三行省略效果 -->
<div class="three-line-ellipsis">
  The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. It was led by Colonel Boris Pash, a former Manhattan Project security officer.
</div>

兼容说明 #

• 这个CSS方案对现代浏览器支持非常好，基本覆盖了90%以上的用户场景
• 如果需要兼容旧版Firefox或IE，就得用JavaScript来模拟（比如计算文本高度，超出后截断并添加省略号），但现在一般业务中很少需要考虑这些旧浏览器了

内容的提问来源于stack exchange，提问作者Rasoul