超长文本用省略号截断（多行）

概述

当容器的最大高度有限制时，如果其内部文本超长溢出，用省略号把文本超出指定行数之后的部分截断是个常见需求。

本文讨论多行文本超长截断的场景。

代码片段

.container {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;	// 行数
}

-webkit-line-clamp 这个属性很灵活，它的值表示最大行数。因此无需为容器指定 max-height。

最佳实践

• 在不同场景下截断行数可能并不固定，因此我们可以定义一个 mixin，可接收行数作为参数，这样就可以灵活复用了。

  // 定义 mixin
  @mixin multi-line-ellipsis($lines) {
  	overflow: hidden;
  	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: $lines;
  }
  
  // 使用 mixin
  .container {
  	@include multi-line-ellipsis(3);	// 限制行数为 3
  }
  

坑

• 由于 display: -webkit-box 是旧版 WebKit 内核激活 Flexbox 布局的语法，你可能会有冲动，想把这行代码改成更标准的 display: flex，毕竟当前主流浏览器都已支持标准的 Flexbox 语法了。与之类似，-webkit-box-orient: vertical 这一行也有更标准的替代者。但遗憾的是，-webkit-line-clamp 属性必须搭配这两行看起来已经过时的声明才会生效，所以还是忍忍吧。