overflow-y
尝试一下
语法
/* 关键字值 */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;
/* 全局值 */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;
overflow-y
属性可指定为下列 <overflow>
关键字值之一。
当 overflow-x
的值为 hidden
、scroll
或者 auto
,而 overflow-y
属性的值为 visible
(默认值)时,该值会被隐式地计算为 auto
。
取值
visible
-
溢出的内容不会被截断,且可以显示在元素边距(padding)框的上下边缘之外。元素盒子不是滚动容器。
-
如有必要,溢出的内容会被截断以从垂直方向适应元素的边距框,不会显示滚动条。
clip
-
在溢出截断边缘(使用
overflow-clip-margin
属性定义)上的溢出内容会被截断。即,距元素内边距框指定宽度(为overflow-clip-margin
的<length>
值,若未设置则为0px
)范围内的内容会溢出。clip
和hidden
的区别是clip
关键字还禁止所有滚动,包括程序性滚动(programmatic scrolling)。其不会创建新的格式化上下文。如果要创建新的格式化上下文,请将overflow: clip
与display: flow-root
一起使用。元素盒子不是滚动容器。 scroll
-
如有必要,溢出的内容会被截断以从垂直方向适应元素的边距框。无论内容是否发生溢出,浏览器总是显示滚动条。(这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。)而打印机可能会打印溢出的内容。
auto
-
元素边距框中的溢出内容会被截断,且溢出内容可通过滚动以进行浏览。与
scroll
关键字值不同的是,用户代理只在内容溢出时显示滚动条,默认不会显示滚动条。如果内容可以适应元素的边距框,则看起来与visible
相同,但仍然会创建新的格式化上下文。
备注:关键字值 overlay
是 auto
的一个遗留别名。使用 overlay
时,滚动条会绘制在内容上方,而不占用空间。
形式定义
初始值 | visible |
---|---|
适用元素 | Block-containers, flex containers, and grid containers |
是否是继承属性 | 否 |
计算值 | as specified, except with visible /clip computing to auto /hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
动画类型 | 离散值 |
形式语法
示例
设置 overflow-y 行为
HTML
<ul>
<li>
<code>overflow-y:hidden</code>——在盒外隐藏文本
<div id="div1">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>
<li>
<code>overflow-y:scroll</code>——总是添加滚动条
<div id="div2">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>
<li>
<code>overflow-y:visible</code>——必要时在盒外显示文本
<div id="div3">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>
<li>
<code>overflow-y:auto</code>——在多数浏览器上等价于 <code>scroll</code>
<div id="div4">
歌词是诗歌的一种,入乐的叫歌,不入乐的叫诗(或词)。入乐的歌在感情抒发、形象塑造上和诗没有任何区别,但在结构上、节奏上要受音乐的制约,在韵律上要照顾演唱的方便,在遣词炼字上要考虑听觉艺术的特点,因为它要入乐歌唱。歌词与诗的分别,主要是诗不一定要入乐(合乐),歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的,歌词是歌曲的本意所在。现代一般是配合音乐,便于哼唱的语句。
</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 350px;
height: 100px;
}
#div1 {
overflow-y: hidden;
margin-bottom: 12px;
}
#div2 {
overflow-y: scroll;
margin-bottom: 12px;
}
#div3 {
overflow-y: visible;
margin-bottom: 150px;
}
#div4 {
overflow-y: auto;
margin-bottom: 120px;
}
结果
规范
Specification |
---|
CSS Overflow Module Level 3 # overflow-properties |
浏览器兼容性
BCD tables only load in the browser