简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

分享CSS溢出overflow实例教程

零下一度
发布： 2017-07-26 16:22:27
原创
4183 人浏览过

裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

div
{
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-浏览器的按钮(包括