何必剪裁？溢出内容隐藏术 overflow: clip

2024-01-29 23:03:15

一切元素都有它所占的空间，其内容尺寸不超过它的尺寸，则显示正常；如果内容超出了尺寸，就叫做溢出。对于溢出内容，有两种解决办法，一是通过滚动条观看溢出部分，二是将溢出内容隐藏起来，overflow 样式就是通过设置不同的属性值，达到控制溢出内容呈现方式的目的。

早期的overflow可以取auto、scroll、visible和hidden四个值：

当为auto时，会自动生成滚动条来显示溢出内容
当为scroll时，与auto类似，强制生成滚动条，让内容溢出后也能完全呈现
当为visible时，没有滚动条，溢出内容也不做修剪，直接显示出来
当为hidden时，则不显示溢出内容，选择隐藏溢出部分

在 Chrome 90 版本开始，overflow 增加了新的属性值 clip，它可以对溢出内容进行裁剪，当内容溢出时直接裁剪掉，不会展示出来，相当于给内容盖了一层看不见的壳。例如，当想让图片在容器中显示出来时，却超出了容器的尺寸，那么使用 overflow: clip，溢出的部分会直接剪裁，剩下的部分显示在容器中。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  overflow: clip;
}

img {
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>

<div>
  <img src="image.jpg">
</div>

</body>
</html>

上面这个例子中，div 的宽度和高度都为 100px，背景色为红色。图片的宽度和高度都为 200px，如果 overflow 为 visible，那么图片会显示在 div 外面，而 overflow 为 clip 时，图片溢出的部分则会被裁剪掉。

overflow: clip 与 overflow: hidden 区别在于，overflow: clip 会裁剪掉溢出内容，而 overflow: hidden 则会隐藏溢出内容，但仍然占据空间。如果容器的背景是透明的，那么 overflow: hidden 会让溢出内容显示为透明的，而 overflow: clip 则会完全裁剪掉溢出内容。

overflow: clip 还有几个特性：