在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？
一般来说，在做这样文字截断效果时我们更多是希望：
兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整
文本超出范围才显示省略号，否则不显示省略号
省略号位置显示刚好
基于上述的准则，下面我们通过编码实践，给出一些答案。
单行文本溢出省略
核心 CSS 语句
overflow: h
在网页设计和开发中，文本溢出截断省略是一个常见的需求，特别是在处理有限空间内的多文本展示时。本文将探讨纯CSS实现“文本溢出截断省略”的几种方法，以及它们的适用场景和优缺点。
单行文本溢出省略是通过以下CSS代码实现的：
```css
.overflow-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
```
这种方法的优点是兼容性好，适用于大部分主流浏览器，并且可以实现响应式截断，根据容器宽度自动调整。它只显示一行文本，当内容超出容器宽度时，会显示省略号。然而，这种方法的局限在于只能处理单行文本，无法应用于多行文本的截断。
对于多行文本的溢出省略，可以使用Webkit专有的`-webkit-line-clamp`属性：
```css
.multi-line-ellipsis {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2; /* 指定显示的行数 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
```
这种方法可以让内容在指定的行数内显示，超出部分则用省略号表示。但需要注意的是，`-webkit-line-clamp`的兼容性仅限于基于Webkit内核的浏览器，如Chrome和Safari，因此在其他非Webkit浏览器中可能无法正常工作。
另一种多行文本的解决方案是利用伪元素和绝对定位：
```css
.positioned-ellipsis {
position: relative;
overflow: hidden;
line-height: 18px;
height: 36px;
}
.positioned-ellipsis::after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
}
```
这种方法通过绝对定位伪元素来实现省略号，具有较好的兼容性，但它的缺点是无论文本是否溢出，都会显示省略号，而且省略号的位置可能与文字贴合不够紧密，影响视觉效果。这种方法适合于内容较长且确定会超过容器大小的情况。
总结来说，纯CSS实现文本溢出截断省略有多种策略，每种都有其特定的应用场景和局限性。开发者需要根据项目需求和目标用户的浏览器兼容性来选择合适的实现方式。单行截断简单实用，适合大多数情况；多行截断则需要权衡兼容性和效果，可以根据实际需求选择Webkit方案或伪元素定位方案。在实现过程中，确保响应式设计和良好的用户体验是关键。
