正在加载...

CSS Overflow

你可以给盒子固定尺寸。如果内容比这个盒子更高或更宽呢？overflow 决定多余内容是溢出、被裁切，还是变成可滚动。

关键字一览

📊 常见 overflow 值

值 日常含义
visible（默认） 多余内容可以溢出盒子
hidden 多余内容被裁切；没有滚动条
scroll 显示滚动条（常常即使不需要也显示）
auto 仅在内容溢出时出现滚动条

默认：内容可以溢出

使用 overflow: visible（默认）时，长内容可能画到盒子边缘之外。

可见 overflow（默认）

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

用 hidden 裁切

overflow: hidden 会裁掉放不下的部分。边缘干净时很有用 — 但用户无法滚动查看其余内容。

Hidden 裁切溢出

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

用 scroll 始终显示滚动条

overflow: scroll 让盒子可滚动，并且通常即使内容装得下也会预留滚动条空间。

始终 scroll

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — 需要时才滚动

overflow: auto 是面板的稳妥日常选择：内容溢出时出现滚动条，不需要时往往不碍事。

需要时 auto

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

单独控制一个轴

当水平与垂直行为应不同时，使用 overflow-x 与 overflow-y — 例如允许纵向滚动、裁切横向溢出。

纵向滚动，横向裁切

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

实用的面板习惯

给盒子真实高度（或 max-height），然后为可读的可滚动区域选择 auto。

可滚动笔记面板

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

自己动手

  1. 做带 width 和较短 height 的盒子，粘贴几段文字。
  2. 在 visible、hidden、scroll、auto 之间切换 overflow。
  3. 给宽文本行设 overflow-x: hidden 与 overflow-y: auto。
  4. 用 max-height 做 .note-panel，看滚动条是否只在需要时出现。
  5. 没有高度（或 max-height）限制时，overflow 往往没什么可约束。

常见错误

  • 没有受限高度/宽度却指望 overflow 生效
  • 到处用 scroll，其实 auto 更稳妥
  • 把 overflow（盒子溢出）和 text-overflow（文本省略号 — 后续工具）搞混
  • 用 hidden 裁切却忘了用户可能需要看到其余内容
  • 以为 overflow 会改变 box-sizing 算法（不会）

小结

  • 内容大于盒子时，overflow 控制溢出、裁切与滚动
  • 默认是 visible；hidden 裁切；scroll 提供滚动条；auto 需要时出现
  • 通常需要受限尺寸（height / max-height / width）才能看到效果
  • overflow-x 与 overflow-y 分开控制轴向
  • 对许多面板，overflow: auto 是稳妥习惯

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程