Skip to main content

overflow

overflow​

该属性定义了 当一个元素的内容太大而无法适应块级格式上下文时，该元素的行为。

它是 overflow-x 和 overflow-y 的简写形式。

overflow: <overflow-x> <overflow-y>;

其中，overflow-x 或 overflow-y 的取值如下：

  • visible（默认值），元素溢出的内容不会被修剪，而是正常显示
  • hidden，元素溢出的内容会被隐藏
  • scroll，元素溢出的内容会被修剪，并且产生滚动条
  • auto，如果元素该方向的内容被修剪，则产生滚动条，否则不产生

这里解释一下我们经常使用的 auto 和 scroll 的区别。

div {
  width: 100px;
  height: 100px;
  overflow: auto; /* 相当于 overflow: auto auto; */
}

上面的例子中，当 div 的内容高度超过其元素高度，那么就会产生一个垂直方向的滚动条，由于内容的水平宽度没有超过元素的宽度，那么就不会出现水平方向的滚动条。

div {
  width: 100px;
  height: 100px;
  overflow: scroll; /* 相当于 overflow: scroll scroll; */
}

上面的例子中，无论 div 的内容的大小是否超出了其元素大小，在水平方向和垂直方向都会产生一个滚动条。

注意事项
  • 元素的滚动条的出现会影响 elem.clientWidth/Height 的取值，如果出现滚动条，那么 elem.clientWidth/Height 会从原来的基础上减去滚动条的宽度
  • 即使元素的 overflow 设置为 hidden，我们也可以通过 JS 来修改 elem.scrollTop 让内容滚动

text-overflow​

这个属性主要用于设置文本溢出时的省略效果。

word-break 与 overflow-wrap​

这两个属性主要用于一段文本中的英文单词如何进行间断换行，具体查询文档。