1. 介绍
在前端开发中，经常会遇到需要控制文本长度的情况。当文本过长时，我们不希望其溢出容器，而是希望在超过容器宽度时显示省略号。这在展示标题、概要等信息时非常常见。CSS提供了多种方式实现这一效果，本文将详细介绍其中的几种方法。
2. 单行文本溢出省略
2.1 使用text-overflow属性
要实现单行文本溢出省略的效果，可以通过text-overflow属性来实现。结合overflow属性和white-space属性，我们可以实现文字超出容器时显示省略号。
.overflow-ellipsis {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
在上述代码中，我们通过设置容器的宽度为200px，overflow为hidden，white-space为nowrap来让文本在一行显示，然后通过设置text-overflow为ellipsis，在文字超出容器时显示省略号。
这里要注意的是，text-overflow属性只能用于单行文本溢出省略，多行文本不起作用。
2.2 使用伪元素
为了实现多行文本溢出省略，我们可以使用伪元素::after或::before来模拟省略号。首先，我们需要设置容器的高度和行数限制：
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
在上述代码中，我们通过使用-webkit-box布局来实现多行文本的展示，然后通过设置-webkit-line-clamp属性限制行数为2，最后将溢出的文本隐藏。
接下来，我们使用伪元素来创建省略号。在容器的::after伪元素中，设置content属性为省略号，然后通过绝对定位将其放置在容器的最后一行：
.line-clamp::after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
background-color: white;
padding: 0 4px;
}
在上述代码中，我们设置content属性为省略号，然后将其使用绝对定位放置在容器的最后一行，并设置背景色和padding来美化省略号的显示效果。
但需要注意的是，这种方法只在Safari和Chrome浏览器中生效，不适用于其他浏览器。
3. 多行文本溢出省略
3.1 使用webkit属性
在WebKit内核的浏览器中，我们可以使用-webkit-line-clamp属性来实现多行文本溢出省略的效果。
.multiline-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
在上述代码中，我们通过设置display为-webkit-box来实现多行文本的展示，然后使用-webkit-line-clamp属性设置行数为3，最后将溢出的文本隐藏。
同样地，这种方法只在WebKit内核的浏览器中有效。
3.2 使用JavaScript
如果要实现在所有浏览器上都生效的多行文本溢出省略的效果，则可以使用JavaScript来实现。
首先，我们需要获取到文本的实际高度和容器的高度：
var text = document.getElementById('multiline-text');
var container = document.getElementById('multiline-container');
var textHeight = text.clientHeight;
var containerHeight = container.clientHeight;
其中，multiline-text为存放文本内容的元素，multiline-container为容器元素。
接下来，我们比较文本的实际高度和容器的高度，如果文本高度大于容器高度，则执行省略操作：
if (textHeight > containerHeight) {
var maxLength = Math.floor(containerHeight / lineHeight); // 每行的字数
var textContent = text.textContent;
var ellipsisText = textContent.slice(0, maxLength); // 截取省略部分的文本
text.textContent = ellipsisText + '...';
}
在上述代码中，我们计算出每行的字数maxLength，然后根据maxLength截取文本内容的部分，并在末尾添加省略号。这样就实现了多行文本的溢出省略效果。
4. 总结
本文详细介绍了在CSS中实现控制文本长度的方法，包括单行文本溢出省略和多行文本溢出省略。对于单行文本溢出省略，可以使用text-overflow属性或伪元素来实现；对于多行文本溢出省略，在WebKit内核浏览器中可以使用-webkit-line-clamp属性，在其他浏览器中可以使用JavaScript来实现。
根据需求选择合适的方法来控制文本长度的溢出省略，在保证良好用户体验的同时，提升页面的美观度和可读性。