文本溢出时ellipsis未显示，需实现多行文本溢出省略效果

你当前的CSS配置仅适用于单行文本溢出截断，text-overflow: ellipsis 默认不支持多行场景。要实现多行文本末尾显示省略号，需要补充WebKit内核的私有CSS属性来控制多行截断逻辑。

修改后的CSS代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}

.text {
  padding: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  margin: 50px;
  background: yellow;
  height: 150px;
  /* 新增多行截断属性 */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

属性说明 #

• display: -webkit-box：将元素转为WebKit弹性盒模型，为多行截断提供基础布局支持
• -webkit-line-clamp: 6：指定文本最多显示6行，数值根据你的容器高度（150px）和行高（20px）计算得出（容器可用高度为150-40=110px，110/20≈5.5，取整为6）
• -webkit-box-orient: vertical：设置弹性盒的排列方向为垂直，配合-webkit-line-clamp实现按行数截断

兼容性说明 #

该方案基于WebKit内核，Chrome、Safari、Edge等现代浏览器均支持。若需兼容Firefox等非WebKit浏览器，可通过JavaScript计算文本高度或使用伪元素模拟省略号效果，但原生WebKit方案是最简洁高效的实现方式。

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