如何实现文本超出两行后隐藏多余内容并末尾显示省略号

实现方案 #

你可以通过纯CSS样式实现需求，兼容性覆盖绝大多数现代浏览器，直接给.detail类添加如下样式即可：

.detail {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 控制仅显示2行 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 可选配置：可根据你的设计需求调整行高，避免不同字体渲染导致行数偏差 */
  line-height: 1.6;
  max-height: 3.2em;
}

属性说明 #

• overflow: hidden：隐藏所有超出容器边界的内容
• text-overflow: ellipsis：指定文本溢出时显示省略号
• display: -webkit-box + -webkit-box-orient: vertical：将元素设置为垂直排列的弹性盒布局，是行数限制的前置条件
• -webkit-line-clamp: 2：核心属性，指定容器最多显示2行文本

兼容性说明 #

该方案支持Chrome、Edge、Safari全版本，Firefox 68及以上版本，覆盖96%以上的全球用户，常规业务场景完全够用。如果需要兼容极老旧浏览器，可以通过JavaScript计算文本宽度/高度，超出时手动截断内容拼接省略号即可。

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