• 技术文章 >web前端 >css教程

    overflow-x属性怎么用

    青灯夜游青灯夜游2019-02-12 15:47:32原创398
    overflow-x属性是用来指定当元素溢出内容区域时,是否对内容的左/右边缘进行裁剪。

    CSS3 overflow-x属性

    作用:overflow-x属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

    提示:使用overflow-y属性来判断顶部和底部边缘是否裁剪。

    语法:

    overflow-x: visible|hidden|scroll|auto|no-display|no-content;

    visible:不裁剪内容,可能会显示在内容框之外。

    hidden:裁剪内容 - 不提供滚动机制。

    scroll:裁剪内容 - 提供滚动机制。

    auto:如果溢出框,则应该提供滚动机制。

    no-display:如果内容不适合内容框,则删除整个框。

    no-content:如果内容不适合内容框,则隐藏整个内容。

    注:overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。

    CSS3 overflow-x属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style> 
    div
    {
    width:110px;
    height:110px;
    border:thin solid black;
    overflow-x:hidden;
    overflow-y:hidden;
    }
    </style>
    </head>
    <body>
    
    <div><p style="width:140px">
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    </p></div>
    
    <p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
    <p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
    
    </body>
    </html>

    效果图:

    1.jpg

    以上就是overflow-x属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    第八期线上培训班
    专题推荐:overflow-x属性 CSS3
    上一篇:border-image-width属性怎么用 下一篇:overflow-y属性怎么用

    相关文章推荐

    • 关于overflow-y:hidden; overflow-X:auto;在IE9的问题_html/css_WEB-ITnose• 如何处理CSS3属性前缀_html/css_WEB-ITnose• 高性能封装检测浏览器支持css3属性函数_html/css_WEB-ITnose• 部分易被忽视的css3属性_html/css_WEB-ITnose

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网