04溢出处理

盒子定了尺寸，内容却装不下，怎么办？overflow 一家子负责收场： 裁掉、滚动、还是显示省略号。长标题截断、聊天记录滚动区、横向滑动卡片， 都是这一课的配方。

约 15 分钟 6 个动手实验 每个布局都会用到

一、为什么会溢出

给盒子设了固定的宽或高，而内容（文字、图片、子元素）比盒子大， 多出来的部分就叫溢出（overflow）。 默认情况下浏览器不会报错，而是让内容「露」到盒子外面——你以为它在里面，其实它已经越界了。

文字从固定高度的盒子里溢出来了：把 .ov-why 的 overflow 改成 hidden，越界的字立刻消失
溢出不一定是坏事：前面的《定位》一课的「角标」就是故意让元素溢出卡片边缘。 该露的露，该藏的藏——overflow 就是那道闸门。

二、overflow 的四种取值

overflow 决定「装不下的内容怎么处理」，四个取值一张表看全：

overflow 取值行为分析
取值行为典型场景
visible默认：内容露出来，压到外面角标、装饰性溢出
hidden直接裁掉，不给滚动条裁圆角图片、隐藏多余部分
scroll内容裁剪，滚动条常驻（横竖都有）固定区域强制可滚
auto内容裁剪，需要时才出现滚动条日常首选，最省心
clip类似 hidden，但禁止任何滚动（含编程式滚动）较少用
同样内容四种处理：把第四个盒子的 overflow: auto 改成 hidden，滚动条立刻消失、文字被裁
scroll 与 auto 的区别一句话：scroll 是「我先占好滚动条的位」，auto 是「需要时再说」。 另外注意：在 macOS 等默认隐藏滚动条的系统上两者观感可能一样，Windows 上差异明显。

三、overflow-x / overflow-y：分轴控制

溢出可以只管一个方向：overflow-x 管横向、overflow-y 管纵向， 组合出「横向能滚、纵向锁死」这类效果——手机 App 里左右滑动的标签栏就是这么做的。

横向滚动的标签栏：把 overflow-x: auto 改成 hidden，溢出到右侧的标签立刻被裁没
规范规定：如果一个轴设成了 hidden / scroll / auto，另一个轴的 visible 会被 自动转成 auto（不能一边说裁剪一边说露出来）。所以「x 设了 hidden、y 想保持 visible」是做不到的。

四、单行文本省略号三件套

商品列表的长标题、表格里的长字段，最优雅的截断是单行显示 + 末尾省略号。 它需要三个属性配合，缺一个都不行：

  • white-space: nowrap —— 不许换行（先把内容「挤」出去）；
  • overflow: hidden —— 超出部分裁掉；
  • text-overflow: ellipsis —— 裁掉的位置显示「…」。
同一个长标题，上面折行、下面省略号：把 .ov-elli-cut 的 text-overflow: ellipsis 删掉，末尾的「…」立刻消失（只剩硬切）
三件套必须写在装文字的那个元素上（通常是标题本身，不是卡片）； 另外 text-overflow 只有配合 overflow: hidden 才会生效，单独写没有任何效果。

五、多行省略号：-webkit-line-clamp

只显示两三行、多余的省略——摘要卡片、评论区的标配。 标准的省略号三件套只管「单行」，多行截断要请出 WebKit 时代的私有属性组合 （名字带 -webkit- 前缀，但主流浏览器全都支持，放心用）：

多行省略号四件套：一个都不能少
属性作用
display: -webkit-box启用 WebKit 弹性盒布局（行数截断的基础）
-webkit-line-clamp: N最多显示 N 行，之后出省略号
-webkit-box-orient: vertical子元素纵向排列
overflow: hidden配合裁剪，多余内容不外露
上面原样显示、下面截成 3 行：把 -webkit-line-clamp: 3 改成 2，下面立刻变成两行省略
想给截断处加「展开全文」按钮、或截断后仍要完整内容的场景，通常改用 JS 计算行数—— 纯 CSS 的 line-clamp 只负责「剪」，不负责「交互」。

六、定制滚动区域：固定高度 + overflow-y: auto

「页面很长，但聊天记录 / 歌曲列表 / 评论区想锁在自己的框里滚动」—— 配方固定：容器写死高度 + overflow-y: auto，里面放任意多的内容。

聊天记录式滚动列表：把 overflow-y: auto 改成 hidden，下面几条消息立刻被裁掉
进阶小技巧：默认滚动条又粗又丑？可以用 ::-webkit-scrollbar 系列伪元素定制宽度、颜色和圆角 （如 .ov-chat::-webkit-scrollbar { width: 6px; }），让滚动区域更精致。

七、本章小结

  • 内容超出固定尺寸的盒子就是溢出，默认 visible 露出来。
  • overflow 四值：visible 露出 / hidden 裁掉 / scroll 滚动条常驻 / auto 按需出现（日常首选）。
  • overflow-x / overflow-y 分轴控制；一轴裁剪时另一轴的 visible 会自动变 auto。
  • 单行省略号三件套：white-space: nowrap + overflow: hidden + text-overflow: ellipsis，缺一不可。
  • 多行省略号：display: -webkit-box + -webkit-line-clamp + -webkit-box-orient: vertical + overflow: hidden。
  • 定制滚动区域 = 固定高度 + overflow-y: auto；overflow: hidden 还能顺手包住浮动（BFC 特性）。
动手练习：做一张「商品卡片」：标题用三件套单行截断，描述用 line-clamp 截成两行； 再做一个 160px 高的滚动评论区，自己的消息靠右、别人的靠左； 最后把标题的 overflow: hidden 删掉，亲眼看看省略号是怎么消失的。