溢位（Overflow）
使用這些簡寫工具程式快速設定內容溢出元素的方式。
溢位（Overflow）
使用四個預設值和類別即時調整 overflow 屬性。這些類別預設不是響應式的。
This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.
<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 example on an element.overflow-x-hidden example.overflow-x-visible example .overflow-x-scroll example on an element<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 example on an element with set width and height dimensions.
.overflow-y-hidden example on an element with set width and height dimensions.
.overflow-y-visible example on an element with set width and height dimensions.
.overflow-y-scroll example on an element with set width and height dimensions.
<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 變數來自訂溢位工具程式。
CSS
Sass utilities API
溢位通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 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,
),