CSS - overflow
Posted 时倾
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS - overflow相关的知识,希望对你有一定的参考价值。
overflow: 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该怎么显示。它是 overflow-x
与 overflow-y
属性的简写。
值
visible
【默认值】
内容不会被修剪,溢出会呈现在元素框之外。hidden
溢出内容被剪裁,不可见,不提供滚动条。scroll
溢出内容被剪裁,浏览器显示滚动条查看溢出内容。auto
如果内容不溢出,不显示滚动条;
如果内容溢出,类似于scroll
, 显示滚动条查看溢出内容;
- 除
visible
(默认值)以外的值,都会创建一个新的块级格式化上下文;- 为使
overflow
有效果,块级容器必须有一个指定的高度(height
或者max-height
)或者将white-space
设置为nowrap
。
语法
从值中选出一个或两个关键字来指定overflow
属性: overflow: overflow-x overflow-y
;
如果设置一个关键字,overflow-x
和overflow-y
设置为相同的值。
也可单独对overflow-x
和overflow-y
设置值。
overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: hidden scroll;
/* But on Firefox 63 and later, it will be */
overflow: scroll hidden;
设置一个轴为visible
(默认值),同时设置另一个轴为不同的值,会导致设置visible
的轴的行为会变成auto
。
实际问题
y轴溢出滚动条,x轴溢出显示
本来以为 overflow-y: auto;
就可以解决, 实际 x 轴溢出内容不显示;
然后修改为 overflow-y: auto; overflow-x: visible;
或 overflow: visible auto
, 让 x 轴溢出之后不剪切也不出现滚动条,实际结果还是 x 轴溢出内容不显示。
原因
一个轴为visible
,另一个轴为不同的值,会导致设置visible
的轴的行为变成auto
。
以上是关于CSS - overflow的主要内容,如果未能解决你的问题,请参考以下文章