溢出 overflow
visible/hidden/scroll/auto、overflow-x/y 分轴控制
溢出 overflow
overflow 控制内容超出容器时的行为——隐藏、滚动、可见。
学完本章你将： 掌握 visible/hidden/scroll/auto、overflow-x/y。
四种值
css
.visible { overflow: visible; } /* 内容溢出可见（默认） */
.hidden { overflow: hidden; } /* 溢出内容隐藏 */
.scroll { overflow: scroll; } /* 始终显示滚动条 */
.auto { overflow: auto; } /* 需要时才显示滚动条（推荐） */分轴控制
css
.box {
overflow-x: hidden; /* 水平溢出隐藏 */
overflow-y: auto; /* 垂直溢出滚动 */
}实用场景
css
/* 单行省略 */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行省略 */
.multiline-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 最多 3 行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 清除浮动 */
.clearfix { overflow: auto; }