overflow

overflow该属性作用在block型元素上，能够在内容元素溢出元素框时发生的事：剪裁内容，使用滚动条来显示或直接显示超出的内容。

语法

overflow: visible;
overflow: scroll;
overflow: hidden;
overflow: auto;

值

值	描述
visible	此关键词表示超出元素框的内容不会被修剪，会显示在元素框之外。
hidden	此关键词表示超出元素框的内容会被修剪，不可见
scroll	此关键词表示内容会被修剪，且浏览器会使用滚动条。
auto	此关键词表示在内容溢出时提供滚动条。

例子

HTML

<div id="red">
    <div id="orange">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

CSS

 #red {
      width: 200px;
      height: 50px;
      border: solid 1px red;
      overflow: auto;
}
#orange {
      width: 500px;
      height: 20px;
      background: orange;
}

执行结果

ABCDEFGHIJKLMNOPQRSTUVWXYZ

参考

相关链接

外部链接

overflow-MDN


跳至内容顶部