溢出
使用这些简写工具可以快速配置内容如何溢出元素。
溢出
🌐 Overflow
使用四个默认值和类实时调整 overflow 属性。这些类默认情况下不是响应式的。
🌐 Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.
这是一个在具有设置宽度和高度的元素上使用.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 属性以水平影响内容溢出。
🌐 Adjust the overflow-x property to affect the overflow of content horizontally.
.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 属性以影响内容在垂直方向上的溢出。
🌐 Adjust the overflow-y property to affect the overflow of content vertically.
.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 变量，你可以通过更改 _variables.scss 中的 $overflows 变量来自定义溢出工具。
🌐 Using Sass variables, you may customize the overflow utilities by changing the $overflows variable in _variables.scss.
CSS
Sass 工具 API
🌐 Sass utilities API
溢出工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。
🌐 Overflow utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities 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,
),