溢出

定义

用于控制元素如何处理超出容器的内容的工具类。

工具类	属性
overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	text-overflow: clip;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

效果展示

自动

使用工具类 overflow-auto 在一个元素的内容溢出该元素的边界时为其添加滚动条。不像 overflow-scroll 总是显示滚动条，这个工具类只在需要滚动时才会显示。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。
小楼昨夜又东风，故国不堪回首月明中。
雕栏玉砌应犹在，只是朱颜改。
问君能有几多愁？恰似一江春水向东流

隐藏

使用工具类 overflow-hidden 来剪切元素中任何溢出该元素边界的内容。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。
小楼昨夜又东风，故国不堪回首月明中。
雕栏玉砌应犹在，只是朱颜改。
问君能有几多愁？恰似一江春水向东流

可见

使用工具类 overflow-visible 来防止元素内的内容被剪切。请注意，任何溢出元素边界的内容都将是可见的。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。
小楼昨夜又东风，故国不堪回首月明中。
雕栏玉砌应犹在，只是朱颜改。
问君能有几多愁？恰似一江春水向东流

需要时水平滚动

如果需要，使用工具类 overflow-x-auto 来允许水平滚动。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

需要时垂直滚动

如果需要，使用工具类 overflow-y-auto 来允许垂直滚动。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

始终水平滚动

如果需要，使用工具类 overflow-x-scroll 来允许水平滚动。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

始终垂直滚动

如果需要，使用工具类 overflow-y-scroll 来允许水平滚动。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

在所有方向上滚动

如果需要，使用工具类 overflow-scroll 来允许水平滚动。

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流

虞美人·春花秋月何时了

五代·李煜

春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流