【CSS】布局 - Overflow

最新推荐文章于 2022-09-06 14:08:44 发布

韩韩二水

最新推荐文章于 2022-09-06 14:08:44 发布

阅读量171

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43885779/article/details/86693677

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
</style>

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

在这里插入图片描述

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：在这里插入图片描述
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

overflow: visible

默认情况下，overflow 的值为 visible，意思是内容溢出元素框：
在这里插入图片描述

<style>
	div {
	    background-color: #eee;
	    width: 200px;
	    height: 50px;
	    border: 1px dotted black;
	    overflow: visible;
	}
</style>

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

在这里插入图片描述

韩韩二水

关注

0
点赞
踩
0

收藏

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

CSS overflow 属性用于控制内容溢出元素框时显示的方式。&lt;style&gt;#overflowTest { background: #4CAF50; color: white; padding: 15px; width: 80%; height: 100px; overflow: scroll; border: 1px s...
复制链接

扫一扫

专栏目录