CSS 布局 - 控制元素内容溢出

CSS overflow 属性定义由于内容太大而无法放入一个规定大小区域的时候该做什么，是隐藏多余内容，还是增加滚动条。

overflow 属性的可选值：

• visible - 默认。多余的内容呈现在元素框外
• hidden - 多余的内容被隐藏起来
• scroll - 通过滚动条以查看多余内容
• auto - 与 类似 scroll ，但仅在必要时添加滚动条

! 注意： overflow 属性仅适用于具有指定高度的块元素。

overflow: visible

visible 是默认选项，超出的内容不会隐藏，而是直接显示在元素的框外。

显示溢出的内容：

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

overflow: hidden

hidden 将多余的内容隐藏。

div {
  overflow: hidden;
}

overflow: scroll

scroll 会为多余的内容添加滚动条。此属性会导致不管有没有溢出的内容，都会显示滚动条（Mac 系统的滚动条时自动显示的）。

div {
  overflow: scroll;
}

overflow: auto

auto 会为多余的内容添加滚动条，但仅在必要时添加滚动条。

div {
  overflow: auto;
}

overflow-x 和 overflow-y

• overflow-x 只控制水平方向的溢出内容
• overflow-y 只控制垂直方向的溢出内容

div {
  overflow-x: hidden; /* 隐藏水平溢出的内容 */
  overflow-y: scroll; /* 显示垂直滚动条 */
}

所有 CSS 溢出属性