跳到主要内容

样式与 CSS · CSS

溢出与滚动

Overflow

也叫:overflow、内容溢出、滚动条、文字截断

内容超出容器大小时的处理方式:露在外面、裁掉、出现滚动条,或者把长文字截断成省略号。

示例

详细解释

内容超出容器的宽高就是溢出。overflow 决定怎么处理:visible(默认,内容露到外面)、hidden(裁掉超出部分)、auto(超出时才出现滚动条,最常用)、scroll(始终显示滚动条)。overflow-x、overflow-y 分别控制横向和纵向。

长文字截断也属于这一类:单行截断要同时写 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis;多行截断用 line-clamp,Tailwind 里是 line-clamp-2。

常见问题:手机上页面能左右晃,通常是某个元素太宽横向溢出;overflow: hidden 会让吸顶失效,还会裁掉下拉菜单。

开发者信息
术语 ID
style-overflow
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29