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的情况,感谢观看我们下期再见。

相关推荐
不想上班只想要钱10 分钟前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
Li_Ning2139 分钟前
为什么 Vite 速度比 Webpack 快?
前端·webpack·node.js
2501_9153738840 分钟前
Electron 入门指南
前端·javascript·electron
同志327132 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟2 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境2 小时前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu2 小时前
Github Action + docker 实现自动化部署
前端·自动化运维
关山2 小时前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i2 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨2 小时前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值