当我们需要在一个固定宽度和高度的容器中展示多行文本时，如果文本内容超出了容器的范围，就会出现滚动条或者被截断的情况。为了提升用户体验，我们可以使用CSS实现多行文本的溢出省略，使得文本内容在超出容器范围时自动省略，并且跨浏览器表现一致。
实现方式
实现多行文本溢出省略主要有以下两种方式：
- 使用CSS3属性
text-overflow结合ellipsis - 使用伪元素
::after结合linear-gradient
方式一：使用CSS3属性 text-overflow 结合 ellipsis
我们可以通过设置text-overflow: ellipsis;让浏览器自动将多余的文本内容省略，并用省略号代替。但是，这个属性只适用于单行文本，对于多行文本则无效。因此，我们还需要设置以下两个属性：
white-space: nowrap; /* 禁止换行 */ overflow: hidden; /* 隐藏溢出部分 */
接下来，我们将display属性设置为-webkit-box和-webkit-line-clamp来指定显示的行数，如下所示：
-- -------------------- ---- ------- --- - ------ ------ ------- ------ -------- ------------ ------------------- -- -- ------ -- ------------------- --------- --------- ------- -------------- --------- -
这个方式在Safari、Chrome、Opera和Firefox（需要前缀 -moz）上都得到了良好的支持。但是，它不适用于IE和Edge浏览器。
方式二：使用伪元素 ::after 结合 linear-gradient
我们可以通过设置伪元素::after，并结合linear-gradient实现多行文本溢出省略。具体来说，我们可以将伪元素的背景设置为渐变色，并将其放置在容器底部，使得文本在超过容器高度时被遮盖。然后，我们将容器的position属性设置为relative，将伪元素的position属性设置为absolute，使得伪元素相对于容器进行定位。
接下来，我们需要设置以下两个属性：
display: -webkit-box; /* 将容器转为弹性布局 */ -webkit-box-orient: vertical; /* 设置弹性布局为垂直方向 */
最后，我们在容器中添加一些占位符元素以填充空白区域，如下所示：
<div> <span>多行文本溢出省略例子：</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet tortor eu semper luctus. Sed viverra nibh vel velit varius malesuada.</p> <span class="placeholder"></span> <span class="placeholder"></span> <span class="placeholder"></span> </div>
完整的CSS样式如下：
-- -------------------- ---- ------- --- - ------ ------ ------- ------ --------- --------- --------- ------- - ---------- - -------- --- --------- --------- ------- -- ------ -- ------ ---- ------- ------ ----------- ------------------ ------ --------- ---- ---- --- ---- ----- - --- ----- --- - - -------- ------------ ------------------- -- -- ------ -- ------------------- --------- -------- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------
