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

    overflow-y属性怎么用

    青灯夜游 青灯夜游 2019-02-12 15:45:23 原创 205
    overflow-y属性是用来指定当元素溢出内容区域时,是否对内容的顶部/底部边缘进行裁剪。

    CSS3 overflow-y属性

    作用:overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。

    提示:使用overflow-x属性来判断左右边缘是否裁剪。

    语法:

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

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

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

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

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

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

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

    说明:所有主流浏览器都支持 overflow-y 属性;但无法在 IE8 以及更早的浏览器正确地工作。

    CSS3 overflow-y属性的使用示例

    <!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-y属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: overflow-y属性 CSS3
    上一篇:overflow-x属性怎么用 下一篇:@charset规则怎么用

    相关文章推荐

    • 关于overflow-y:hidden; overflow-X:auto;在IE9的问题_html/css_WEB-ITnose • IE6/7/8如何兼容CSS3属性_html/css_WEB-ITnose • iframe双滚动条 解决方式 CSS3 overflow-y 属性_html/css_WEB-ITnose • CSS中overflow-y: visible;不起作用的解决方法

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网