overflow-x
overflow-x
は CSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。
試してみましょう
構文
/* キーワード値 */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* グローバル値 */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: unset;
overflow-x
プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
値
visible
-
内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。
overflow-y
がhidden
,scroll
,auto
のいずれかであり、このプロパティがvisible
である場合は、暗黙にauto
に計算します。 -
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
clip
Experimental-
hidden
のように、内容が要素のパディングボックスで切り取られます。clip
とhidden
の違いは、clip
キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、display: flow-root
を使用して実現することができます。 scroll
-
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は
visible
と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
公式定義
初期値 | visible |
---|---|
適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible /clip はそれぞれ auto /hidden と計算される |
アニメーションの種類 | 離散値 |
形式文法
例
HTML
<ul>
- <code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
<div id="div1">
</li>
- <code>overflow-x:scroll</code> — 常にスクロールバーを表示
<div id="div2">
</li>
- <code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
<div id="div3">
</li>
- <code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
<div id="div4">
</li>
</ul>
CSS
#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-x: hidden;
}
#div2 {
overflow-x: scroll;
}
#div3 {
overflow-x: visible;
}
#div4 {
overflow-x: auto;
}
結果
仕様書
Specification |
---|
CSS Overflow Module Level 3 # overflow-properties |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
text-overflow
,white-space
,overflow
,overflow-y
,clip
,display