长 URL、文件路径、代码行、横向表格、缩略图列表——内容可能超出且用户需要完整拿到。出条按需，不浪费空间。
产品与设计 · 布局基础
溢出Overflow
内容超出盒子时，用 overflow 的 visible / hidden / scroll / auto 决定超出部分被裁、溢出还是出滚动条，并可分 overflow-x / overflow-y 两轴独立控制。
切四值，看超出内容被裁、溢出还是出滚动条
一张固定宽度的卡片装了一条比它宽的路径。切换 overflow 四值、换容器宽度、或只设一个轴，当前值徽章、可见情况计量和裁剪边都长在内容盒上，不只是底部一句解释。
场景：一张固定宽度的卡片里放了一条长路径，路径比卡片宽。切换 overflow 四值、换容器宽度、或只设一个轴，看路径被裁、溢出还是在盒内滚动——当前值、可见情况和裁剪边都长在内容盒上。
容器宽 240px右边界
末端被裁。路径超出的部分不可见也不可达——直接复制会少一截，焦点若落进去也会被切掉。原因：hidden 切断超出部分，不给滚动机会，与 auto 不同。下一步：要完整内容就切 scroll/auto，或配省略号提示「还有更多」。
面板里测到的结论
刚才能观察到的四种表现，对应 overflow 的核心性质与几个常被忽略的副作用。
- visible（默认）：超出部分直接溢出盒子，不裁不滚——可能压到邻居或撑破布局。
- hidden：超出部分被裁、不可达；它还会建立 BFC，可清浮动、阻止 margin 折叠（与 margin 卡呼应）。
- scroll：始终显示滚动条（两轴都占位），即便内容不超；适合确知需要滚动的区域。
- auto：内容超出才出滚动条，不超则不出——大多数滚动区的首选。
- 分轴：overflow-x 和 overflow-y 独立；常见 overflow-x: auto + overflow-y: hidden。
- 副作用：overflow≠visible 会让元素成为 absolute/sticky 的包含块，并截断 sticky 的吸附范围（与 sticky 卡呼应）。
什么时候用哪个
按「内容会超吗？超了用户要不要拿到？」来选，不靠手感。
确知区域一定会滚动（如日志面板、聊天记录），常驻滚动条避免内容出现时布局抖动。
装饰性背景、明确不可读的溢出；绝不用它裁掉错误信息、焦点指示、关键操作或 tooltip/dropdown。
正文、可复制文本用 white-space: normal 让它换行；只有不可拆的 token（路径、代码）才走滚动。
怎么用：从声明到验收
四步把一个可能溢出的容器说清楚，不靠「看起来没溢出」。
- 判断内容。会超吗？是可换行正文、不可拆 token，还是装饰？这决定走换行、滚动还是裁剪。
- 选值并分轴。需要拿到完整内容用 auto/scroll；确定不要用 hidden；横向滚纵向不滚就 overflow-x: auto; overflow-y: hidden。
- 单行省略号三件套。需要省略号写 white-space: nowrap; overflow: hidden; text-overflow: ellipsis，并保证全文在悬停或详情可达（与 text-truncate 卡呼应）。
- 验收。键盘能滚到末端、触摸顺滑、复制顺序正确、tooltip/dropdown 不被父级裁切、sticky 祖先未意外失效。
同一张长路径卡片：auto 与 hidden 的对照
目标都是把长路径放进 240px 卡片并保留「复制路径」操作。差异只在 overflow 写法这一处。
240px 卡片里放一条长路径，配 overflow-x: auto。路径在盒内横向滚动，「复制路径」仍能拿到完整字符串。
差异：超出部分可达，操作不被裁。同样 240px 卡片，写成 overflow: hidden。路径末端被裁，用户看不到也滚不到，「复制路径」只复制到可见前缀。
差异：只多一处 hidden，内容永久丢失后半段。快速自测
做一个横向标签云，希望横向能滚、纵向不滚。该写哪一组？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。