溢出隐藏怎么设置 overflow hidden三个典型用法

写页面时经常碰到：容器高度写死 200px，里面的内容一多就顶出边界，把下面的布局全压乱。这时候给容器加一行 overflow: hidden，超出部分直接裁掉，这就是常说的溢出隐藏。

.box {  width: 300px;  height: 200px;  overflow: hidden; }

overflow 有四个常用值：visible 默认不裁剪；hidden 裁掉且不出现滚动条；scroll 一直显示滚动条；auto 内容超出才出滚动条。还能单独设 overflow-x 和 overflow-y，比如横向裁掉、纵向滚动。

单行文字超出显示省略号

列表标题过长时的经典写法，三行缺一不可：

.title {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; }

white-space 负责禁止换行，overflow 负责裁剪，text-overflow 把裁剪处画成省略号，少了中间那行省略号不会出现。

多行省略用 webkit 私有属性，主流浏览器都认：

.desc {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden; }

老项目里溢出隐藏还常被拿来清除浮动：父元素没设高度，子元素全部浮动后父元素高度塌陷，给父元素加 overflow: hidden 会触发 BFC，把浮动子元素包进来。新项目更建议用 display: flow-root 或伪元素方案，语义更清晰，也不会误伤别的部分。

一个反直觉的坑：容器加了 overflow: hidden 之后，子元素里用 position: absolute 定位到容器外的下拉菜单、气泡提示会被一并裁掉。解决办法是把 hidden 加在内层文字的包裹元素上，别加在带定位子元素的外层容器。

溢出隐藏的选用判断：纯裁剪用 hidden，可能需要滚动就 auto，省略号效果配 white-space 和 text-overflow；动手前先想清楚容器里有没有需要伸出去的东西。