CSS 布局 - Overflow

最新推荐文章于 2024-04-21 22:40:04 发布

star walkin

最新推荐文章于 2024-04-21 22:40:04 发布

阅读量409

点赞数

分类专栏： CSS

原文链接：https://www.runoob.com/css/css-overflow.html

版权

CSS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：
在这里插入图片描述
注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

overflow: visible

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：

在这里插入图片描述
实例：

<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

</body>

在这里插入图片描述

<title>菜鸟教程(runoob.com)</title>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>

在这里插入图片描述

star walkin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。CSS OverflowCSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：注意:overflow 属性只工作于指定高度的块元素上。注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。overflow: visible默认情况下，overflow 的值为 vis
复制链接

扫一扫