在前端开发中，我们经常需要处理长段落的文本。当这些文本被放置在较小的容器中时，它们可能会超出容器的长度。通常，我们可以通过使用JavaScript来截取文本并添加省略号来解决这个问题。但是，在本篇文章中，我们将讨论一种纯CSS的方法来实现多行文本超出长度省略。
文字溢出处理
在CSS中，有一个属性text-overflow可以控制当文本溢出其容器时如何显示。默认情况下，文本会被裁剪成容器的大小。但是，我们可以使用text-overflow属性来将裁剪后的文本替换为省略号。
.ellipsis {
white-space: nowrap; /* 当文本溢出时不换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 使用省略号替换溢出的文本 */
}这个方法对于单行文本非常有效，但是当文本跨越多行时就会遇到问题。
多行文字溢出处理
要处理多行文本溢出，我们可以使用display属性和-webkit-box扩展属性来创建一个包含省略号的块级元素。
.ellipsis-multiline {
display: -webkit-box; /* 这个属性是Safari/Chrome等WebKit浏览器所特有的 */
-webkit-box-orient: vertical; /* 设置为垂直方向 */
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 显示三行文本，根据需要更改该值 */
}这里使用了-webkit-line-clamp属性来指定要显示的行数。在上述代码中，我们将该值设置为3，以便显示三行文本。如果需要调整行数，则可以按需更改此值。
请注意，-webkit-line-clamp属性只适用于WebKit浏览器，如Safari和Chrome。对于其他浏览器，我们可以使用类似以下的代码：
-- -------------------- ---- ------- -- ------------------- -- ------------------- - -------- ------ -------- ------------ ----------- - - ------------------- -- -------- -- ------- -- ------------ ------------------- ---------- -- ------------------- --------- --------- ------- -------------- --------- -
在这个例子中，我们使用max-height属性和自定义属性--line-height来控制要显示的行数。请注意，在这种情况下，我们需要使用两个display属性，其中第二个属性是针对WebKit浏览器的。这是因为WebKit浏览器对display属性的实现略有不同。
示例代码
下面是一个示例，演示了如何使用CSS来省略多行文本：
<p class="ellipsis">这是一段单行文本，可以通过text-overflow:ellipsis来进行省略。</p> <p class="ellipsis-multiline">这是一段多行文本，可以通过使用-webkit-box和-webkit-line-clamp来进行省略。这个方法只适用于WebKit浏览器。</p> <p class="ellipsis-multiline">这是一段多行文本，可以通过使用max-height和自定义属性来进行省略。这种方法兼容所有浏览器。</p>
-- -------------------- ---- ------- --------- - ------------ ------- --------- ------- -------------- --------- - ------------------- - -------- ------------ ------------------- --------- --------- ------- -------------- -------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------