本文阐述了如何利用CSSoverflow属性处理元素内容溢出，包括四种模式：visible、hidden、scroll和auto，并举例说明了在文本省略、图片管理和轮播图中的应用。
你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。
云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集
279篇原创内容-更多前端系列内容可以go公众.h：云桃桃
后台回复“前端工具”可获取开发工具，持续更新中
后台回复“前端基础题”可得到前端基础100题汇总，持续更新中
后台回复“前端电子书”可获取20+本精选电子书
前言
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。
而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。
那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。如果没有明确设置宽度和高度，浏览器将会自动根据内容进行调整，此时 overflow 属性可能不会产生预期的效果。
ok，那我们一起来看看吧。
overflow 的 4 个属性值
1、visible：默认值，溢出内容会显示在元素框外，不会被剪切或隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
background-color: #ddd;
width: 300px;
height: 80px;
border: 1px dotted #333;
font-size: 26px;
overflow: visible;
}
</style>
</head>
<body>
<div class="box">周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省永春县，华语流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000年，发行个人首张音乐专辑《Jay》 [26]。2001年，凭借专辑《范特西》奠定其融合中西方音乐的风格 [16]。2002年，举行“The One”世界巡回演唱会 [1]。2003年，成为美国《时代》杂志封面人物 [2]；同年，发行音乐专辑《叶惠美》 [21]，该专辑获得第15届台湾金曲奖最佳流行音乐演唱专辑奖 [23]。2004年，发行音乐专辑《七里香》 [29]，该专辑在亚洲的首月销量达到300万张 [316]；同年，获得世界音乐大奖中国区最畅销艺人奖 [320]。2005年，主演个人首部电影《头文字D》 [314]，并凭借该片获得第25届香港电影金像奖和第42届台湾电影金马奖的最佳新演员奖 [3] [315]。2006年起，连续三年获得世界音乐大奖中国区最畅销艺人奖 [4]。</div>
</body>
</html>
效果如下：
2、hidden：溢出内容会被剪切或隐藏，不会显示在元素框外，但也不会提供滚动条。
还延续上个案例，把最后一行 css 改成overflow: hidden;。
效果如下，内容被剪切隐藏了：
3、scroll：如果内容溢出，会显示滚动条以便查看所有内容，即使溢出内容不可见。
把 css 改成overflow: scroll;。
效果如下，展示了滚动条了：
4、auto：根据内容是否溢出来决定是否显示滚动条，只有当内容有溢出情况发生时才会显示滚动条，不溢出不显示。
把 css 改成overflow: auto;。
效果如下，因为内容多溢出了，所以展示滚动条了：
overflow 的水平与垂直
有时候，我们也许不需要水平和垂直都有，而是垂直有，水平没有，或者水平没有，垂直有，怎么做呢？
overflow-x 和 overflow-y就是来解决这个问题的， 它们是用于控制元素在水平和垂直方向上溢出内容的属性。
-
overflow-x：用于控制元素在水平方向上溢出内容的显示方式。其属性值和上述overflow的 4 个属性值一样。 -
overflow-y：用于控制元素在垂直方向上溢出内容的显示方式。其属性值和上述overflow的 4 个属性值一样。
它们通常用于以下布局场景：导航栏/标签栏，数据表格，图片/图册，横向滚动的页面区域等。
来看代码，这个就是一个横向相册的案例：
<div class="container">
<div class="content"><img src="img/header1.png" alt="" /> <img src="img/header1.png" alt="" /><img src="img/header1.png" alt="" /><img src="img/header1.png" alt="" /><img src="img/header1.png" alt="" /></div>
</div>
.container {
width: 600px; /* 设置容器宽度 */
height: 240px; /* 设置容器高度 */
border: 1px solid #ccc;
overflow-x: auto; /* 当内容溢出时显示滚动条 */
overflow-y: hidden; /* 垂直方向上隐藏溢出内容 */
}
.content {
width: 1200px; /* 设置内容宽度超出容器 */
height: 150px; /* 设置内容高度 */
padding: 10px; /* 设置内边距 */
}
.content img {
margin-right: 10px;
}
效果如下：
需要图片的可以在公众号回复overflow获取。
延伸：3个常见的使用场景
1、处理长文本溢出显示省略号：
-
场景：当文本内容超出容器宽度时，需要控制文本到一定宽度后，显示...省略号。比如网易云音乐的这样。
-
解决方案：通常使用
overflow: hidden;配合white-space和text-overflow这三个属性一起实现文本超出显示省略号。
这种效果的代码如下：
<div class="txt-over">这个内容这么长这么长这么长这么长这么长这么长这么长这么长这么长这么长这么长这么长abcdef.</div>
.txt-over {
width: 400px;
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 溢出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
border: 1px solid #ccc;
}
效果如下：
2、图片溢出处理：
-
场景：当图片尺寸大于页面要求尺寸时，需要控制图片的显示的一种缺省方式。
-
解决方案：可以根据情况使用
overflow: hidden;，将溢出的部分隐藏，以保持容器的视觉整洁。
.image-container {
width: 300px; /* 容器宽度 */
height: 200px; /* 容器高度 */
overflow: hidden; /* 溢出部分隐藏 */
}
3、轮播图：
-
场景：在轮播图组件中，通常会有多张图片或内容进行轮播展示。比如，京东的圈的这块。
-
解决方案：需要结合 JavaScript 实现轮播功能，并使用
overflow: hidden;控制容器显示范围，配合定位或动画实现图片切换效果。
.carousel-container {
width: 100%; /* 容器宽度 */
height: 300px; /* 容器高度 */
overflow: hidden; /* 溢出部分隐藏 */
position: relative; /* 相对定位，用于轮播图元素定位 */
}
根据具体需求和展示效果，选择合适的 overflow 属性值，可以有效控制元素的溢出内容，提升页面的视觉效果和用户体验。
ok，本文完。
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
