在网页布局中，当容器内的内容尺寸超过容器本身的大小时，我们可以通过css的相关属性来控制超出的内容，实现隐藏、显示省略号等效果，避免内容溢出破坏页面布局。
实现内容超出隐藏的核心属性
要实现内容超出隐藏，最核心的属性是overflow，它用来控制元素内容溢出时的处理方式，常用取值如下：
- visible：默认值，内容不会被修剪，会呈现在元素框之外
- hidden：内容会被修剪，超出容器的部分直接隐藏，不可见
- scroll：内容会被修剪，浏览器会显示滚动条以便查看剩余内容
- auto：如果内容溢出，则浏览器显示滚动条以便查看剩余内容
单行文本超出隐藏并显示省略号
如果只需要处理单行文本的超出隐藏，并且希望超出的部分显示省略号，需要搭配text-overflow和white-space属性一起使用，三个属性的搭配规则如下：
| 属性 | 取值 | 作用 |
|---|---|---|
| overflow | hidden | 隐藏超出容器的内容 |
| text-overflow | ellipsis | 超出部分显示省略号 |
| white-space | nowrap | 强制文本在一行内显示，不换行 |
对应的css代码示例如下：
/* 单行文本超出隐藏样式 */
.single-line-overflow {
width: 200px; /* 固定容器宽度 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
对应的html结构如下：
<div class="single-line-overflow">
这是一段很长的单行文本内容，当内容长度超过容器宽度时，超出的部分会被隐藏并显示省略号
</div>
多行文本超出隐藏并显示省略号
如果需要处理多行文本的超出隐藏，webkit内核的浏览器可以使用-webkit-line-clamp属性来实现，该属性用来限制块级元素显示的文本行数，搭配以下属性使用：
display: -webkit-box：将元素设置为弹性盒模型-webkit-box-orient: vertical：设置弹性盒子的子元素垂直排列-webkit-line-clamp: 行数：设置显示的行数，超出部分隐藏overflow: hidden：隐藏超出的内容
对应的css代码示例如下，这里设置最多显示3行文本：
/* 多行文本超出隐藏样式，兼容webkit内核浏览器 */
.multi-line-overflow {
width: 200px; /* 固定容器宽度 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示3行，超出隐藏 */
overflow: hidden;
}
对应的html结构如下：
<div class="multi-line-overflow">
这是一段很长的多行文本内容，当内容长度超过容器宽度并且行数超过3行时，超出的部分会被隐藏并显示省略号。这里可以放很多文字来测试效果，比如再补充一些内容让文本足够长，达到触发多行隐藏的条件。
</div>
普通块级内容超出隐藏
如果容器内不是文本，而是图片、其他块级元素等内容，只需要设置overflow: hidden就可以实现超出部分隐藏，不需要额外的文本相关属性。比如一个固定尺寸的容器放一张大图片，超出部分直接裁剪隐藏：
/* 普通块级内容超出隐藏 */
.block-overflow {
width: 300px;
height: 200px;
overflow: hidden;
}
<div class="block-overflow">
<img src="https://ipipp.com/example.jpg" alt="示例图片" style="width: 400px; height: 300px;">
</div>
注意事项
使用-webkit-line-clamp实现多行文本超出隐藏时，仅兼容webkit内核的浏览器，比如Chrome、Safari等，如果需要兼容其他浏览器，可以通过计算文本高度的方式来实现，不过实现复杂度会更高。另外，设置overflow: hidden之后，元素内部的滚动事件会失效，因为超出的内容已经被隐藏，无法触发滚动操作。
cssoverflowtext-overflowwhite-space修改时间：2026-07-07 21:42:26