单行文本溢出省略通过white-space: nowrap、overflow: hidden和text-overflow: ellipsis实现，需容器有固定或最大宽度；多行省略常用-webkit-box、-webkit-line-clamp和-webkit-box-orient，配合overflow: hidden，适用于现代浏览器，建议结合max-width、title属性优化响应式与用户体验。
文字溢出显示省略号是网页开发中常见的需求，尤其在标题或描述过长时保持布局美观。对于CSS初学者来说，掌握单行和多行文本溢出的处理方式非常实用。
单行文字溢出加省略号
实现单行文本溢出省略，关键在于三个CSS属性的配合使用：
- white-space: nowrap：强制文本不换行
- overflow: hidden：超出容器部分隐藏
- text-overflow: ellipsis：用省略号表示被截断的文本
示例代码：
.container {width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：容器必须有固定宽度或最大宽度，否则无法触发溢出效果。
立即学习“前端免费学习笔记（深入）”；
多行文字溢出加省略号
多行省略稍微复杂一些，常用的是基于WebKit内核浏览器支持的扩展属性。
- display: -webkit-box：将元素设为弹性盒子
- -webkit-line-clamp：限制显示的行数
- -webkit-box-orient：设置伸缩盒子的方向
- 同样需要 overflow: hidden
示例代码（限制两行）：
.container {width: 200px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
这种方法兼容性较好，适用于大多数现代浏览器，但在非WebKit系浏览器中可能表现不一致，需测试确认。
实际项目中的小技巧
在真实项目中，建议结合响应式设计考虑文本截断：
- 给容器设置 max-width 而非固定 width，适应不同屏幕
- 避免在按钮或可点击区域使用过多省略，影响用户体验
- 配合 title 属性，鼠标悬停时显示完整文字：
<div title="完整文本内容">截断的文本...</div>
基本上就这些。单行省略简单稳定，多行依赖Webkit扩展但广泛支持。写的时候注意结构和样式分离，方便后期维护。不复杂但容易忽略细节。
