overflow属性控制内容溢出显示，text-overflow实现文字省略。通过visible、hidden、scroll、auto控制溢出方式，结合white-space、overflow和text-overflow:ellipsis实现单行省略，使用-webkit-line-clamp配合-webkit-box实现多行省略，需注意兼容性及降级处理。
当内容超出容器范围时，CSS 的 overflow 属性和文字省略技巧能有效控制显示方式。它们常用于布局优化和用户体验提升，特别是在空间有限的区域，比如导航栏、卡片标题或表格单元格。
overflow 属性的基本用法
overflow 决定容器内溢出内容的处理方式，常用取值包括：
- visible：默认值，内容不被裁剪，在容器外可见
- hidden：溢出内容被隐藏
- scroll：无论是否溢出，都显示滚动条
- auto：仅在内容溢出时显示滚动条
例如，限制一个固定高度的 div 出现垂直滚动条：
.container {
width: 200px;
height: 100px;
overflow-y: auto;
}
单行文字溢出省略（text-overflow）
要实现单行文本溢出显示省略号（...），需要组合使用多个属性：
立即学习“前端免费学习笔记（深入）”；
- white-space: nowrap：强制文本不换行
- overflow: hidden：隐藏溢出部分
- text-overflow: ellipsis：溢出时显示省略号
典型写法如下：
.text-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文字省略的实现方式
CSS 没有原生的多行 text-overflow，但可通过以下方法模拟：
- -webkit-line-clamp：限制行数（WebKit 支持）
- 结合 display: -webkit-box 和 -webkit-box-orient
示例：限制显示 2 行文本：
.text-multi {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
注意：该方案在非 WebKit 浏览器中兼容性有限，生产环境建议配合 JS 或使用现代 CSS 方案（如 clamp() 配合遮罩）做降级处理。
基本上就这些。掌握 overflow 与 text-overflow 的组合，能灵活应对大多数文本溢出场景，关键是理解每项属性的作用和依赖条件。
