オーバーフロー Overflow
これらの短縮形ユーティリティを使用して、コンテンツが要素をオーバーフローする方法を素早く設定します。
オーバーフロー
4つのデフォルト値とクラスを使用して、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変数を変更することで、overflowユーティリティをカスタマイズできます。
CSS
SassユーティリティAPI
Overflowユーティリティは、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,
),