裁剪 p 元素中内容的左/右边缘 – 如果溢出元素的内容区域的话:
p { overflow-x:hidden; }
浏览器支持
所有主流浏览器都支持 overflow-x 属性。
注释:overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。
定义和用法
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 – 如果溢出元素内容区域的话。
overflow-X | overflow-y
overflow-x和overflow-y的属性原本是IE浏览器独自拓展的属性,后来被CSS3采用,并标准化。overflow-x主要用来定义对水平方向内容溢出的剪切,而overflow-y主要用来定义对垂直方向内容溢出的剪切
[注意]如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto
值: visible | hidden | scroll | auto | inherit | no-display | no-content
初始值: visible
应用于: 块级元素、替换元素、表单元格
继承性: 无
属性
visible
元素的内容在元素框之外也可见
[注意1]IE6-浏览器中元素的包含块会延伸,使得可以包裹其超出的内容
.box{ height: 200px; width: 200px; background-color: lightgreen; }.in{ width: 300px; height: 100px; background-color: lightblue; }
<p class="box"> <p class="in"></p></p>
左图为IE6-浏览器,右图为其他浏览器
[注意2]IE7-浏览器的按钮(包括<button>和<input type=”button”>两种)存在bug,当按钮上的文字越多时,按钮两侧的padding就越大。通过设置overflow:visible就可解决该问题
左图为默认情况,右图为设置overflow后的情况
auto
如果内容被剪裁,则浏览器会显示滚动条以便查看其余的内容
[注意]对于一般浏览器来说,<html>和<textarea>默认带有overflow:auto的属性。但IE7-浏览器则不同,默认存在纵向滚动条
//IE7-浏览器 html{overflow-y: scroll;}//其他浏览器 html{overflow: auto;}//去除页面默认滚动条 html{overflow: hidden;}
scroll
元素的内容会在元素框的边界处剪裁,但浏览器会显示滚动条以便查看其余的内容
[注意]firefox和IE8+浏览器在overflow:scroll或auto时,存在padding-bottom缺失现象
.box{ width: 100px; height: 100px; padding: 50px; background-color: pink; overflow:scroll; }.in{ width: 100px; height: 200px; background-color: lightgreen; }
<p class="box"> <p class="in"></p></p>
左图为chrome浏览器的情况,右图为firefox浏览器的情况
hidden
元素的内容会在元素框的边界处剪裁,并且超出剪裁区域的内容不可见
no-display
当内容溢出容器时不显示元素,类似于元素添加了display:none属性一样
no-content
当内容溢出窗口时不显示内容,类似于元素添加了visibility: hidden属性一样
[注意]no-display和no-content这两个属性目前没有浏览器支持
失效
绝对定位元素不总是被父级overflow属性剪裁,尤其是当overflow在绝对定位元素及其包含块之间的时候
[注意]由于固定定位是相对于视窗定位的,所以固定定位元素无法被其所有的父级元素overflow属性剪裁