CSS - overflow

Posted 时倾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS - overflow相关的知识,希望对你有一定的参考价值。

overflow: 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该怎么显示。它是 overflow-xoverflow-y 属性的简写。

  • visible【默认值】
    内容不会被修剪,溢出会呈现在元素框之外。
  • hidden
    溢出内容被剪裁,不可见,不提供滚动条。
  • scroll
    溢出内容被剪裁,浏览器显示滚动条查看溢出内容。
  • auto
    如果内容不溢出,不显示滚动条;
    如果内容溢出,类似于 scroll, 显示滚动条查看溢出内容;
  1. visible(默认值)以外的值,都会创建一个新的块级格式化上下文;
  2. 为使overflow 有效果,块级容器必须有一个指定的高度(height或者max-height)或者将white-space设置为nowrap

语法

从值中选出一个或两个关键字来指定overflow 属性:
overflow: overflow-x overflow-y
如果设置一个关键字,overflow-xoverflow-y设置为相同的值。
也可单独对overflow-xoverflow-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的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS动画

为啥css的overflow不显示滚动条

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

为啥这个 CSS 示例使用“height: 1%”和“overflow: auto”?