在CSS中，文本截断是一个常见的需求，特别是在有限的布局空间内展示长文本时。text-overflow属性为我们提供了优雅的解决方案，可以实现单行和多行文本的省略号显示效果。
单行文本省略
单行文本截断是最基础也是最常用的方式，主要通过以下CSS属性组合实现：
css
.single-line {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
width: 200px; /* 需要指定宽度 */
}工作原理
white-space: nowrap确保文本不会换行overflow: hidden隐藏超出容器的内容text-overflow: ellipsis在文本溢出时显示省略号
多行文本省略
多行文本截断稍微复杂一些，需要使用CSS的-webkit-line-clamp属性（注意这是WebKit浏览器专有属性）：
css
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制显示行数 */
overflow: hidden;
text-overflow: ellipsis;
}跨浏览器解决方案
对于需要更广泛浏览器支持的情况，可以考虑以下方法：
css
.multi-line-fallback {
position: relative;
line-height: 1.2em;
max-height: 3.6em; /* 行高 × 行数 */
overflow: hidden;
}
.multi-line-fallback::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: linear-gradient(to right, transparent, white 50%);
}注意事项
- 单行截断必须指定明确的宽度
- 多行截断的
-webkit-line-clamp在现代浏览器中支持良好，但在旧版IE中不工作 - 考虑添加
title属性或工具提示，让用户可以看到完整文本 - 响应式设计中，可能需要根据屏幕尺寸调整截断行数
实际应用示例
html
<div class="card">
<h3 class="single-line">这是一个非常非常非常非常非常非常非常长的标题</h3>
<p class="multi-line">这是一个多行文本截断的示例。当内容超过指定行数时，会自动显示省略号。这在卡片式布局中特别有用，可以保持界面整洁美观。</p>
</div>通过合理运用这些文本截断技巧，可以显著提升网页的视觉一致性和用户体验，特别是在内容密集的界面中。
