使用这些速记实用程序快速配置内容溢出元素的方式。
溢出
使用四个默认值和类动态调整属性。默认情况下，这些类不响应。overflow
这是在设置宽度和高度尺寸的元素上使用的示例。根据设计，此内容将垂直滚动。.overflow-auto
这是在设置宽度和高度尺寸的元素上使用的示例。.overflow-hidden
这是在设置宽度和高度尺寸的元素上使用的示例。.overflow-visible
这是在设置宽度和高度尺寸的元素上使用的示例。.overflow-scroll
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
overflow-x
调整属性以影响内容水平溢出。overflow-x
.overflow-x-auto元素上的示例具有设定的宽度和高度尺寸。
.overflow-x-hidden例在具有设置宽度和高度尺寸的元素上。
.overflow-x-visible例在具有设置宽度和高度尺寸的元素上。
.overflow-x-scroll元素上的示例具有设定的宽度和高度尺寸。
<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>
overflow-y
调整属性以影响内容的垂直溢出。overflow-y
.overflow-y-auto具有设置宽度和高度尺寸的元素的示例。
.overflow-y-hidden具有设置宽度和高度尺寸的元素的示例。
.overflow-y-visible具有设置宽度和高度尺寸的元素的示例。
.overflow-y-scroll具有设置宽度和高度尺寸的元素的示例。
<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>
使用 Sass 变量，您可以通过更改 中的变量来自定义溢出实用程序。$overflows_variables.scss
CSS系统
Sass 实用程序 API
溢出实用程序在我们的实用程序 API 中声明。了解如何使用实用工具 API。scss/_utilities.scss
"overflow": (
property: overflow,
values: auto hidden visible scroll,
),
"overflow-x": (
property: overflow-x,
values: auto hidden visible scroll,
),
"overflow-y": (
property: overflow-y,
values: auto hidden visible scroll,
),