溢位

使用這些簡寫公用程式快速設定內容如何溢出元素。

在此頁面上

溢位

使用四個預設值和類別動態調整 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 變數，您可以透過變更 _variables.scss 中的 $overflows 變數，自訂溢出公用程式。

CSS

Sass 公用程式 API

溢出公用程式在 scss/_utilities.scss 中的公用程式 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,
),