CSS 中设置截断的文本溢出 默认一行 也可多行文本

 在CSS 中 我们都知道text-overflow的属性是可以设置一行文本溢出，但很少人知道也同样了可以设置多行文本，下面我来介绍一下。

text-overflow的属性值:

clip（默认值）

在内容区域的极限处截断文本。因此在字符的中间可能会发生截断。

ellipsis
用一个省略号 ('…') 来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

使用条件

1. 有溢出

text-overflow 属性并不会强制溢出事件的发生，文本过长时有可能会自动换行，导致根本不会触发 text-overflow 属性上的设置。因此，需要手动设置 white-space: nowrap 使文本禁止换行，以确保文本过长时会有溢出。

2. 溢出部分隐藏

对于溢出部分的文本，需要设置overflow: hidden来隐藏，从而触发 text-overflow 属性的截断效果。

一般情况下，我们结合这两个条件来使用 text-overflow，就可满足大部分需求，写法如下：

text-overflow: ellipsis或clip; 
white-space: nowrap; 
overflow: hidden;

特殊情况下文本溢出属性也不会生效，需要其他方法，如flex容器需要设置min-width为0、table容器需要设置table-layout为fixed

3、重点来了，如何设置为多行溢出？
text-overflow: -webkit-line-clamp 是一个 CSS 属性，它用于限制文本显示的行数。该属性只在 WebKit 引擎的浏览器中有效，比如 Chrome、Safari等。

解决方案：

1）使用 -webkit-line-clamp 属性来限制在指定的行数后截断文本，并且用 text-overflow: ellipsis 来添加省略号。

.ellipsis {

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 3;

        overflow: hidden;

        text-overflow: ellipsis;

}

2）使用 display: -webkit-box 和 -webkit-box-orient: vertical 属性，以便使用 -webkit-line-clamp 属性。

3）使用 overflow: hidden 属性来确保超出指定行数的文本被隐藏。

示例如下：

<div class="ellipsis">

这是一段很长的文本，我们希望在三行之后显示省略号。如果文本超出了三行，那么超出的部分将不会被显示，并且在末尾会有省略号。

</div>

注意：-webkit-line-clamp 属性只在 WebKit 浏览器中有效，所以在使用时需要考虑浏览器的兼容性。