使用这些简写工具可以快速配置内容如何溢出一个元素。
本页目录
溢出
使用四个默认值和类动态调整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 中的 scss/_utilities.scss 中声明。了解如何使用工具 API。
"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,
),