CSS overflow属性

  • 定义和用法

    overflow属性指定内容溢出元素框时应发生的情况。此属性指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。
    注意overflow属性仅适用于具有指定高度的块元素。
    特征 说明
    默认值 visible
    继承 没有
    动画 没有。CSS动画参考
    CSS版本 CSS2
    JavaScript语法 object.style.overflow="scroll"尝试一下
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    属性 IE/Edge Chrome FireFox Safari Opera
    属性名称
    overflow 4.0
    1.0
    1.0
    1.0
    7.0
    注意:在OS X Lion(在Mac上),默认情况下隐藏滚动条,仅在使用时显示(即使设置了“overflow:scroll”)。
  • CSS语法

    overflow: visible|hidden|scroll|auto|initial|inherit;
  • 实例

    显示不同的overflow属性值:
    div.ex1 {
      overflow: scroll;
    }
    
    div.ex2 {
      overflow: hidden;
    }
    
    div.ex3 {
      overflow: auto;
    }
    
    div.ex4 {
      overflow: visible;
    }
    
    尝试一下
  • 属性值

    属性值 描述
    visible 溢出没有被剪裁。 它呈现在元素框之外。 这是默认的
    hidden 溢出被剪切,其余内容将不可见
    scroll 剪辑溢出,但添加滚动条以查看其余内容
    auto 如果剪切了溢出,则应添加滚动条以查看其余内容
    initial 将此属性设置为其默认值。查看initial关键字
    inherit 从其父元素继承此属性。查看inherit关键字
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS溢出
    CSS教程:CSS定位