CSS溢出

在CSS中一切皆盒子，我们可以设置盒子的大小，但是当我们的内容大于盒子的大小的时候，就会导致内容溢出。

控制溢出的几种方式

overflow

默认值：visible，默认情况下溢出是可见的。

如果想让溢出的元素裁减掉，可以使用hidden。

既不裁剪也不希望溢出，scroll 更合适，他会在原本的盒子上加一个滚动条，既保证盒子的大小，也不会将数据裁减掉。

.box {
  border: 1px solid #333333;
  width: 200px;
  height: 100px;
  overflow: scroll;
}

1
2
3

<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>

<p>This content is outside of the box.</p>