overflow 是 CSS 中节造元素内部文字、图片或子元素超出天堑后若何显示、裁切或滚动的属性 。当段落文字超过卡片高度、图片超出相框，或代码行宽过长时，容器能够让越界部门持续显示、将其裁掉，或提供滚动能力 。它常用于固定尺寸的卡片、代码框、图片容器和横向列表 。
overflow属性的作用领域
块容器、弹性容器和网格容器都能够使用 overflow 治理内部溢出 。属性既能够同时设置水平方向和垂直方向，也能够拆分为 overflow-x 与 overflow-y 别离节造 。它处置的是容器天堑内的溢出，不会自动缩幼子元素，也不能包办文字换杏注图片适配等布局规定 。
若是容器没有明确的宽度或高度限度，文字、图片等可能会把容器撑开，因而看不出溢出成效 。好比，想限度一段注明文字的高度并允许纵向滚动，就必要让容器形成可推算的高度天堑；想限度横向代码行，则要确保容器宽度受到约束 。
常见取值及显示成效
| 取值 | 显示与滚动成效 | 常见用处 |
|---|---|---|
visible | 默认值 。溢出的文字或图片仍显示在容器天堑之表，不裁切，也不因该值提供滚动机造 。 | 允许图标、装璜或文字天然延长的通常布局 。 |
hidden | 超出部门被裁切，通常不显示滚动条；容器仍可通过剧本等方式滚动 。 | 裁切卡片装璜图形，或造作滑动区域的裁切窗口 。 |
clip | 超出部门被裁切，不提供滚动机造；与 hidden 分歧，它不允许通过滚动把被裁掉的文字或图像移入可视区域 。 | 只需硬性裁怯注明确不必要滚动的装璜元素 。 |
scroll | 成立滚动机造，即方便前没有溢出也按该模式处置 。滚动条是否始终可见，还受操作系统和浏览器界面影响 。 | 但愿日志框或代码框始终选取滚动交互的场景 。 |
auto | 文字或图片溢出时提供滚动能力；未溢出时通常不出现滚动条 。 | 长度不固定的评论列表、日志框和代码区域 。 |
例如，使用 overflow: hidden 裁切圆角卡片中的图片时，超出卡片边缘的部门不会显示；改为 overflow: auto，超出天堑的文字或图像则能够在容器内滚动查看 。对于必要用户读完的注明或日志，单纯使用 hidden 可能让后续文字不易被发现，应凭据交互需要选择取值 。
同季节造水平与垂直方向
单独设置 overflow 时，一个值会同时用于两个方向；写两个值时，第一个对应水平方向，第二个对应垂直方向 。拆分属性则能够让横向代码行滚动、纵向区域维持裁切，或反过来处置 。
overflow: auto; 暗示两个方向都按需处置溢出 。overflow: hidden auto; 暗示水平方向裁怯注垂直方向按需滚动 。下面的写法适合宽表格或长代码行：
.code-box { width: 100%; overflow-x: auto; overflow-y: hidden; }
必要注意，两个方向的取值会相互影响：当一个方向设为既非 visible 也非 clip 的值时，另一个方向的 visible 会按推算规定变为 auto；与之类似，另一个方向的 clip 会变为 hidden 。因而，浏览器现实选取的成效有时与单看某一条申明不齐全一样 。
常见布局中的使用方式
卡片图片裁切通常是把图片放进有明确天堑的容器，再用 overflow: hidden 暗藏越界部门 。若卡片还必要圆角，裁切能够让图片沿容器边缘显示 。必要把稳，overflow 只掌管天堑表的显示方式；图片自身的缩放与裁切地位仍由尺寸规定和 object-fit 等属性决定 。
.card { border-radius: 12px; overflow: hidden; }
.card img { display: block; width: 100%; }
代码框或长日志更适合使用 overflow: auto 。代码较短时通常不用展示滚动条，行数或单行长度增长后，读者仍可在框内查看，不会无限撑宽周围布局 。导航标签、功夫轴等横向分列的项目则常使用 overflow-x: auto，让较窄屏幕上的用户横向浏览 。
在弹性布局和网格布局中，子项的最幼尺寸有时会阻止容器按预期收缩，阐发为长文字或代码把整行撑宽 。这类问题不愿定仅靠给父级设置 overflow 就能解决；能够查抄子项的宽度约束，并在适当地位设置 min-width: 0，再由真正掌管滚动的容器处置溢出 。
overflow与文本省略
overflow 不会自动在文字末尾增长省略号 。单行文本通常必要共同固定宽度、white-space: nowrap 和 text-overflow: ellipsis，能力在空间不实时显示省略象征 。例如：
.title { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
这里，overflow: hidden 掌管裁切越界文字，text-overflow 掌管决定裁切处的提醒方式，white-space 则让文字维持在一行内 。短缺其中的前提时，省略成效可能不会出现 。多行文本省略涉及分歧的排版处置，不能把单行写法直接当作通用规划 。
选择overflow值时的关键区别
hidden 与 clip 城市让超出天堑的文字或图片不私见，但前者仍保留滚动容器能力，后者则不提供滚动 。auto 面向按需滚动，scroll 则明确选取滚动机造；分歧设备可能使用常驻滚动条或覆盖式滚动条，因而视觉阐发并不齐全一致 。visible 适合文字和图像天然延展的场景，却不适合必要严格限度天堑的容器 。
此表，取值为 hidden、auto 或 scroll 时，元素通；岢闪⑿碌目樘迨交叩臀；clip 不会因裁切自身成立该高低文 。若必要独立的块体式化高低文而又不想选取滚动式溢出处置，可思考 display: flow-root 。理解裁怯注滚动和布局高低文之间的差距，能力让 overflow 两全视觉成效与文字可接见性 。
