(默认),
hidden,
scroll,
和auto。同样有两个overflow的姐妹属性overflow-y
和overflow-x,它们很少被采用。让我们分别看一下这几个值,并讨论一写共同用法和技巧。
Auto
overflow的auto值很像scroll,它唯一解决的是在你不需要的时候也会出现滚动条的问题。
Hidden
默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容,而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此,请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。
比如有的用户设置他们的浏览器的默认字体比你预期的要大些,你会将一些文字推到盒子的外面然后完全的隐藏之……
Visible
如果你不设置overflow属性,则默认的overflow属性值就是visible。所以一般而言,并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是,尽管盒子外面的内容是可见的,内容并不会影响页面的工作流。一般来说,你至少不用为里面的内容为文字的盒子设置固定的高度,这样就不会遇到这种情况了。
Scroll
设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容,但是它将会提供一个滚动条在盒子内部滚动,从而可以查看剩下的内容。值得注意的是,使用scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中一个。
css overflow属性定义了元素处理溢出内容的方式https://www.apiref.com/css-zh/properties/layout/overflow.htm
visible:
对溢出内容不做处理,内容可能会超出容器。
hidden:
隐藏溢出容器的内容且不出现滚动条。
scroll:
隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。
auto:
当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。textarea元素的overflow默认值就是auto。
clip:
与hidden一样,clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于,clip是一个完全禁止滚动的容器,而hidden仍然可以通过编程机制让内容可以滚动。
overflow有五个值供选择:visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。