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 两全视觉成效与文字可接见性。

uq4tamigmd5nve4r5agvaxpjqwset8