CSS 溢出

当一个元素的内容过多，无法在其指定的尺寸内容纳下时，就会发生“溢出”。overflow 属性用于控制如何处理这种情况。

overflow: visible;

这是 overflow 的默认值。内容不会被裁剪，它会呈现在元素的盒子之外。

div {
  width: 200px;
  height: 65px;
  background-color: #eee;
  border: 1px solid #ccc;
  overflow: visible;
}

在这种情况下，超出的文本会延伸到盒子外部，可能会覆盖页面上的其他元素，通常不是我们想要的效果。

overflow: hidden;

如果将 overflow 设置为 hidden，任何溢出容器的内容都会被裁剪掉，并且变得不可见。

div {
  overflow: hidden;
}

这对于确保内容不会破坏布局很有用，但缺点是用户无法访问被隐藏的内容。

overflow: scroll;

overflow: scroll; 会裁剪掉溢出的内容，但会提供滚动条，以便用户可以滚动查看所有内容。

一个关键点是，scroll 会同时显示水平和垂直滚动条，无论内容是否在两个方向上都溢出。这有时会导致出现一个不必要的、被禁用的滚动条。

div {
  overflow: scroll;
}

overflow: auto;

overflow: auto; 是最常用、最智能的选项。它会根据需要自动添加滚动条。

• 如果内容没有溢出，则不显示滚动条。
• 如果内容在垂直方向溢出，则只显示垂直滚动条。
• 如果内容在水平方向溢出，则只显示水平滚动条。
• 如果两个方向都溢出，则都显示。

div {
  overflow: auto;
}

这通常是处理潜在溢出内容时的最佳选择。

overflow-x 和 overflow-y

你也可以单独控制水平和垂直方向的溢出行为。

• overflow-x: 控制水平方向（X轴）的溢出。
• overflow-y: 控制垂直方向（Y轴）的溢出。

div {
  overflow-x: hidden; /* 隐藏水平滚动条 */
  overflow-y: scroll; /* 总是显示垂直滚动条 */
}

overflow 是一个非常实用的属性，特别是在处理用户生成的内容或在响应式设计中，当元素的尺寸会发生变化时，它可以确保你的布局保持稳健。