如何实现文本第三行末尾添加省略号？

嘿，要让文本在第三行末尾显示省略号，你得用WebKit内核的多行文本截断属性——毕竟原生的text-overflow: ellipsis默认只支持单行场景。这里是能直接用的解决方案：

.post-desc {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 把元素转为WebKit弹性盒模型 */
  -webkit-line-clamp: 3; /* 指定最多显示3行 */
  -webkit-box-orient: vertical; /* 设置文本垂直排列 */
  border: 1px solid #000000;
}

<p class="post-desc">This is some long text that will not fit in the box.</p>

关键属性拆解： #

• display: -webkit-box：这是实现多行截断的基础，把元素转换成WebKit专属的弹性盒布局。
• -webkit-line-clamp: 3：明确告诉浏览器，文本最多只显示3行，超出部分直接截断。
• -webkit-box-orient: vertical：配合上面的属性，让文本在弹性盒里垂直排列，这样行数限制才会生效。
• overflow: hidden + text-overflow: ellipsis：前者隐藏超出的内容，后者在截断的位置显示省略号，这俩是必不可少的搭档。

为啥你之前的代码没效果？ #

你之前删掉了white-space: nowrap，但原生的text-overflow根本不支持多行截断，所以文本只会自然换行，不会在第三行末尾加省略号。而上面的方案用WebKit的私有属性，刚好解决了这个痛点。

小提醒：这个方案在Chrome、Safari这类WebKit内核的浏览器里表现完美，如果需要兼容更多老浏览器，可能得用JavaScript辅助实现，但WebKit的方案是最简洁高效的。

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