css中的overflow需要注意的问题

html中经常会碰到内容超出一个元素的显示范围。overflow就是用来控制超出内容的显示方式。它有以下几个可选项：

• visible(默认值)
• hidden
• auto
• scroll
• inherit

visible为默认值，内容会全部显示，但是会在元素框之外。 hidden为隐藏超出的内容。auto为内容超出时自动出现滚动条，否则不显示滚动条。scroll为始终显示滚动条。

css3中还有overflow-x和overflow-y分别定义x轴和y轴的滚动方式。但是需要注意的是当oveflow-x和overflow-y中有一个是visible而另外一个不是visible的时候，visible会变为auto。举例来说

.test{
  overflow-y:visible;
  overflow-x:hidden;
}

这就等价于

.test{
  overflow-y:auto;
  overflow-x:hidden;
}

w3c中原文如下

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

简洁版：

If you are using visible for either overflow-x or overflow-y and something other than visiblefor the other. The visible value is interpreted as auto.

参考：http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

还需要注意的是：文本内容是无法横向滚动的。除非是设置不自动换行，即：white-space:nowrap。