CSS 中的 `overflow` 属性详解

📌 overflow 是设置什么的？

overflow 用于设置当元素框的内容太多而无法在其内容区域中完全显示时的行为表现。

这个属性适用于所有块级元素、行内块元素、以及 flex 和 grid 容器。

✅ 常见取值及其含义：

🎯 补充说明：

💡 overflow 其实是复合属性，可以分别设置 overflow-x 和 overflow-y：

overflow-x: auto;
overflow-y: hidden;

这意味着你可以分别控制水平方向和垂直方向的溢出行为。

🧪 示例：

<div style="width: 200px; height: 100px; overflow: auto;">
  这是一个很长很长很长很长很长的内容......
</div>

这段代码中，如果内容超出容器宽高，会自动出现滚动条。

🧠 应用场景

1. 滚动区域设置

• 如：聊天窗口、评论区、侧边栏等内容溢出的区域。

2. 防止布局被破坏

• 设置 overflow: hidden 可以截断长内容，保持布局整洁。

3. 制作滚动容器

• 使用 overflow: auto/scroll 可以实现自定义滚动区。

4. 文本超出显示省略号

• 搭配 white-space: nowrap 与 text-overflow: ellipsis。

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}