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：溢出时显示省略号

典型写法如下：

醒文

文字排版美化生图工具

60

查看详情

 .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 的组合，能灵活应对大多数文本溢出场景，关键是理解每项属性的作用和依赖条件。

以上就是