CSS overflow-x 属性

定義と使用法

overflow-x属性は、内容の左/右エッジに対してカットアウトを行うかどうかを規定します - 元素の内容エリアをオーバーフローした場合。

ヒント：使用方法 overflow-y 属性を使用して、上/下エッジのカットアウトを決定します。

CSS タイプ：CSS オーバーフロー

HTML DOM リファレンスマニュアル：overflowX属性

例

div要素の中身の左/右エッジをカットアウト - 元素の内容エリアをオーバーフローした場合：

div
{
overflow-x:hidden;
}

自分で試してみてください

CSS 文法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

属性値

値 説明 テスト
visible 内容をカットアウトしない場合、内容ボックスの外に表示される可能性があります。 テスト
hidden 内容をカットアウト - スクロールメカニズムを提供しません。 テスト
scroll 内容をカットアウト - スクロールメカニズムを提供します。 テスト
auto オーバーフローされたボックスの場合、スクロールメカニズムを提供する必要があります。 テスト
no-display 内容がコンテンツボックスに適さない場合、全体のボックスを削除します。 テスト
no-content 内容がコンテンツボックスに適さない場合、全体の内容を隠します。 テスト

技術的詳細

デフォルト値： visible
継承性： no
バージョン： CSS3
JavaScript 文法： object.style.overflowX="scroll"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

「-ms-」を含む数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
4.0 9.0
8.0 -ms-		 3.5 3.0 9.5