CSS中的overflow
属性控制是用来定义内容太大超出范围的处理方式。其取值范围如下:
visible
- 这是默认取值。超出部分不会被裁剪,而是直接超出元素本身的范围。hidden
- 超出部分会被裁剪掉,汝不会再看到超出的部分。scroll
- 超出部分会隐藏,但是可以通过滑动滚动条来浏览超出部分内容。(会强制显示滚动条)auto
- 超出部分会隐藏,但可以通过滚动来浏览超出部分内容。(类似scroll,但更雅观,当需要滚动的时候才会出现滚动条)不过对于Mac OS X Lion这类苹果公司的电脑操作系统中,取值scroll等价于取值auto,强制显示滚动条这种不雅观的功能在苹果系统中是不能得逞的。总之,尽量用auto属性吧,因为auto的存在,scroll属性可谓就是个鸡肋。
重要提示:overflow属性只针对有特定高度的块级元素(block)才会有效。
visible
是默认取值。超出部分不会被裁剪,而是直接超出元素本身的范围。
div { background-color: #eef8f8; width: 200px; height: 50px; border: 1px dotted #46acb6; overflow: visible; }
取值hidden
,超出部分会被裁剪掉,汝不会再看到超出的部分。
div { background-color: #eef8f8; width: 200px; height: 50px; border: 1px dotted #46acb6; overflow: hidden; }
取值scroll
,超出部分会隐藏,但是可以通过滑动滚动条来浏览超出部分内容。(会强制显示滚动条)
div { background-color: #eef8f8; width: 200px; height: 50px; border: 1px dotted #46acb6; overflow: scroll; }
取值auto
,超出部分会隐藏,但可以通过滚动来浏览超出部分内容。(类似scroll,但更雅观,当需要滚动的时候才会出现滚动条)
div { background-color: #eef8f8; width: 200px; height: 50px; border: 1px dotted #46acb6; overflow: auto; }
如果只想单独设置水平方向或垂直方向上的overflow属性,那使用overflow-x
和overflow-y
即可。
overflow-x
- 只设置水平方向上的overflow属性overflow-y
- 只设置竖直方向上的overflow属性div { overflow-x: hidden; /* 隐藏水平方向上滚动条 */ overflow-y: scroll; /* 添加垂直方向上滚动条 */ }