オーバーフロー
コンテンツが要素からどのようにオーバーフローするかをすばやく設定するには、これらの省略ユーティリティを使用します。
このページの内容
オーバーフロー
4つのデフォルト値とクラスを使用して、`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の使用方法をご覧ください。
"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,
),