css溢出机制指的是当元素内部的内容尺寸超过了元素本身设定的内容区域尺寸时，浏览器对超出部分内容的处理规则。这个机制主要用于解决内容过多导致的布局异常问题，开发者可以通过相关css属性自定义超出的内容是显示、隐藏还是添加滚动条。
css溢出的核心属性overflow
overflow是控制元素溢出内容处理的核心属性，它作用于块级容器元素，有四个常用取值，不同取值对应不同的溢出处理效果。
overflow的取值说明
| 取值 | 说明 |
|---|---|
| visible | 默认值，溢出内容会正常显示在元素外部，不会进行裁剪 |
| hidden | 溢出内容会被裁剪，超出元素范围的部分不可见 |
| scroll | 元素会显示滚动条，无论内容是否溢出，滚动条都会占据空间 |
| auto | 内容溢出时显示滚动条，内容未溢出时不显示滚动条 |
overflow属性示例
下面通过一个固定宽高的容器来演示不同overflow取值的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid #333;
margin-bottom: 20px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="container visible">
这是一段很长的内容，用来测试overflow属性的visible取值效果，内容会超出容器的高度范围，看看会怎么显示。
</div>
<div class="container hidden">
这是一段很长的内容，用来测试overflow属性的hidden取值效果，内容会超出容器的高度范围，看看会怎么显示。
</div>
<div class="container scroll">
这是一段很长的内容，用来测试overflow属性的scroll取值效果，内容会超出容器的高度范围，看看会怎么显示。
</div>
<div class="container auto">
这是一段很长的内容，用来测试overflow属性的auto取值效果，内容会超出容器的高度范围，看看会怎么显示。
</div>
</body>
</html>
文本溢出处理相关属性
除了整体的内容溢出，单行或多行文本的溢出是更常见的场景，需要配合text-overflow和white-space属性来实现文本截断效果。
相关属性说明
white-space：控制文本内的空白和换行规则，处理单行文本溢出时通常设置为nowrap，禁止文本换行。text-overflow：设置文本溢出时的显示方式，常用取值为ellipsis，表示溢出部分用省略号显示。
单行文本溢出省略示例
实现单行文本溢出显示省略号需要三个条件同时满足：容器宽度固定、禁止文本换行、设置overflow为hidden、设置text-overflow为ellipsis。
.single-line {
width: 200px; /* 固定容器宽度 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
border: 1px solid #666;
}
多行文本溢出省略示例
多行文本溢出省略可以通过-webkit-line-clamp属性实现，该属性属于webkit内核私有属性，在大部分现代浏览器中都可以正常使用。
.multi-line {
width: 200px; /* 固定容器宽度 */
display: -webkit-box; /* 使用弹性盒模型 */
-webkit-box-orient: vertical; /* 设置垂直排列 */
-webkit-line-clamp: 3; /* 显示的行数 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
border: 1px solid #666;
}
溢出机制的注意事项
在使用css溢出属性时，需要注意以下几点：
- overflow属性只对具有块级格式化上下文的元素生效，或者元素的display属性为block、inline-block等块级类型。
- 如果父元素没有设置高度，子元素内容溢出时不会触发溢出裁剪，因为父元素的高度会被子元素撑开。
- 设置overflow为hidden的元素，会触发元素的块级格式化上下文，可能会影响内部浮动元素的布局。
需要注意的是，text-overflow属性只有在overflow值不为visible，且文本发生溢出时才会生效，单独设置text-overflow没有效果。
css溢出overflowtext-overflowwhite-space修改时间：2026-07-02 14:12:34