样式与 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、DOM 线索、识别优先级
- 术语 ID
style-overflow- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29