CSS系列之详解overflow（四）
一、什么是溢出
CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。
那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。如果没有明确设置宽度和高度，浏览器将会自动根据内容进行调整，此时 overflow 属性可能不会产生预期的效果。
二、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：溢出内容会被剪切或隐藏，不会显示在元素框外，但也不会提供滚动条。
<!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: hidden;
}
</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>
3、scroll：如果内容溢出，会显示滚动条以便查看所有内容，即使溢出内容不可见。
<!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: scroll;
}
</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>
4、auto：根据内容是否溢出来决定是否显示滚动条，只有当内容有溢出情况发生时才会显示滚动条，不溢出不显示。
<!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: auto;
}a
</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>
关于overflow的内容就讲到这里，尤其注意一下hidden的情况，感谢观看我们下期再见。