如何实现文本左对齐3行显示并超出部分以省略号截断？

先修正HTML结构问题 #

<p>标签属于行内块级容器，不能嵌套<div>这类块级元素，浏览器会自动拆分标签导致布局异常，先把结构调整正确。

修改后的CSS代码 #

.textElipsis {
  width: 250px;
  text-align: left;
  overflow: hidden;
  /* 实现多行省略的核心属性 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 设定显示行数为3 */
  text-overflow: ellipsis;
}

修改后的HTML代码 #

<p class='textElipsis'>
  Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
</p>
<div>
  <code>{textCode}</code>
</div>

关键修改点说明 #

1. 删掉原CSS里的white-space: nowrap——这个属性是强制文本单行显示的核心，必须移除才能实现多行效果。
2. 添加webkit内核的多行省略属性组合：display: -webkit-box定义弹性盒布局、-webkit-box-orient: vertical设置垂直排列、-webkit-line-clamp: 3限制显示行数，配合overflow: hidden和text-overflow: ellipsis完成省略效果。
3. 调整HTML结构，把原本嵌套在<p>内的<div>移到外部，保证HTML语法合规。

目前Chrome、Edge、Safari、新版Firefox等主流浏览器都支持上述webkit属性，若需兼容极旧版非webkit浏览器，可通过JavaScript计算文本高度来实现，但日常开发中上述方案足够覆盖绝大多数场景。

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