【CSS】布局 - Overflow

系统管理员 2022-04-23 08:42 142阅读 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>

![在这里插入图片描述][20190129180937808.png]

### CSS Overflow ###

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

### overflow: visible ###

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

<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>

![在这里插入图片描述][20190129181210674.png]

[20190129180937808.png]: /images/20220322/729800608e514ee69e8fe42b47650ad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220322/2044bb995ea5434a82666dd1bd497460.png
[20190129181109457.png]: /images/20220322/a1e878ef222f4fb9924a1c36bd6989b6.png
[20190129181210674.png]: /images/20220322/f3a2c42aa28645adbd74e577560540e9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS overflow-anchor

为了认识这个属性, 我们需要先看一种常见的现象. 即在网页加载中, 图片常常比文字加载更慢, 这样图片加载完成后可能会将文字向下顶. 比如下图演示

ゝ一纸荒年。/ 2024年05月24日 03:46/ 0 赞/ 31 阅读

相关学习笔记 css overflow

[学习笔记 css overflow][css over

阳光穿透心脏的1/2处/ 2023年02月14日 05:48/ 0 赞/ 67 阅读

相关 CSS之overflow

第1章基本属性 1.1overflow的五种取值 visible（默认） hidden scroll auto inherit

╰+攻爆jí腚メ/ 2022年09月23日 08:28/ 0 赞/ 280 阅读

相关 css overflow属性

定义和用法： overflow属性规定当内容溢出元素框时发生的处理。属性值： 1：visible 默认值。内容不会被修剪，会呈现在元素

蔚落/ 2022年07月14日 09:27/ 0 赞/ 149 阅读

相关 css的overflow属性

css的overflow属性规定内容溢出元素框时，如何处理溢出内容。 overflow属性可能的值： visible：默认值，内容不会被修剪，会呈现在元素框之外。 hid

亦凉/ 2022年06月07日 05:19/ 0 赞/ 185 阅读

相关 css_文档流、display、overflow

1) 文档流将窗体自上而下分成一行一行, 并在每行中按从左至右的顺序排放元素,即为文档流 ; l CSS的定位机制有3种：普通流、浮动和定位 ; l 文档流：从上到下，

た入场券/ 2022年05月25日 05:06/ 0 赞/ 228 阅读

相关【CSS】布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式。 <style> overflowTest { background: 4C

系统管理员/ 2022年04月23日 08:42/ 0 赞/ 143 阅读

相关 CSS Overflow属性详解(转)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置

深碍√TFBOYSˉ_/ 2022年04月10日 08:12/ 0 赞/ 361 阅读

相关 css——overflow属性用法

1、overflow属性规定如何处理如何处理不符合元素框的内容。 2、取值：Object.style.overflow=visible|hidden|scroll|auto；

朴灿烈づ我的快乐病毒、/ 2021年12月12日 02:37/ 0 赞/ 286 阅读

相关 CSS3 overflow-x 属性

CSS3 overflow-x 属性裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话

朱雀/ 2020年10月17日 18:22/ 0 赞/ 792 阅读