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

favvctrh1sj3ttnwjfxdldu9brr2vv