CSS的overflow属性用于控制盒子内容溢出时的显示方式，常见取值有visible（默认，内容不裁剪）、hidden（裁剪溢出内容）、scroll（始终显示滚动条）、auto（按需显示滚动条）；可通过overflow-x和overflow-y分别控制横向或纵向滚动行为；结合white-space、text-overflow可实现文本截断与省略号效果；在移动端使用-webkit-overflow-scrolling: touch可提升滚动流畅度。
当盒子内的内容超出其设定的宽度或高度时，CSS提供了overflow属性来控制如何处理这些溢出的内容。你可以选择隐藏溢出部分、显示滚动条，或让内容自然溢出。以下是常见的处理方式和使用技巧。
1. overflow 属性的基本取值
overflow 可以应用于任何块级元素，常用取值包括：
- visible：默认值，内容不会被裁剪，会显示在盒子之外。
- hidden：溢出的内容将被裁剪，不可见。
- scroll：无论是否溢出，都会显示滚动条（横竖都有）。
- auto：仅在内容溢出时显示滚动条，更智能。
示例：
div {
width: 200px;
height: 100px;
overflow: hidden; /* 超出部分隐藏 */
}2. 控制横向或纵向单独滚动
如果只想让内容在某个方向上滚动，可以使用 overflow-x 和 overflow-y。
立即学习“前端免费学习笔记（深入）”；
- overflow-x：控制水平方向的溢出行为。
- overflow-y：控制垂直方向的溢出行为。
常见场景：
/* 垂直滚动，禁止横向滚动 */
.container {
overflow-x: hidden;
overflow-y: auto;
}这在固定宽度的侧边栏或聊天窗口中很实用。
3. 配合其他属性优化体验
为了让滚动更友好，可结合以下属性：
-
white-space: nowrap：防止文本换行，配合
overflow-x实现横向滚动。 -
text-overflow: ellipsis：与
overflow: hidden搭配，让单行文本溢出时显示省略号。 - max-height + overflow: auto：限制最大高度，内容过多时自动出现滚动条。
文字截断示例：
.title {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}4. 移动端滚动性能优化
在移动端，原生滚动可能不够流畅。可以通过以下方式增强体验：
.scroll-container {
overflow: auto;
-webkit-overflow-scrolling: touch; /* 启用惯性滚动 */
}这个私有属性能让iOS设备上的滚动更顺滑。
基本上就这些。根据实际布局选择合适的 overflow 策略，既能保证内容完整，又能提升界面整洁度。
