overflow-x:要素から水平方向にはみ出す内容の表示方法を指定する

初期値 visible
適用対象 コンテナ要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

overflow-xプロパティの説明

overflow-xは、要素から水平方向にはみ出す内容の表示方法を指定します。例えば、幅が固定された包含ボックスに含まれる文字が多すぎて入り切らない場合に、それを溢れさせて全て表示するのか、切り取って隠すのかを選択できます。

オーバーフローは容器から内容が溢れ出すといった意味を持ちます。ウェブページにおけるオーバーフローには水平方向と垂直方向があり、本プロパティは左右の横へ溢れ出す内容の表示を制御します。

水平方向と垂直方向のオーバーフローを一括で指定する場合はoverflowを、垂直方向のみの指定を行う場合はoverflow-yを使用して下さい。

overflow-xに指定できる値

visible
コンテンツ・エリアからはみ出す内容を、そのまま表示します。要素の寸法が変更できない場合は、コンテンツがボックスの外へ露出します。overflow-yの値がautohiddenscrollのいずれかであり、このプロパティがvisibleの場合は、暗黙的にautoとして計算します。
auto
ブラウザの判定に従います。内容がコンテンツ・エリアに収まる場合は、visibleと同じように振る舞いますが、新しいブロック整形コンテキストを生成します。内容が溢れる場合は、スクロールバーを表示します。
clip(β)
コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されず、プログラム的にスクロースすることも拒否します。
hidden
コンテンツ・エリアからはみ出す内容を隠します。要素の寸法が変更できない場合は、コンテンツが切り取られて閲覧できなくなります。スクロールバーは表示されませんが、プログラム的にスクロースすることを許可します。
scroll
コンテンツはエリアからはみ出しませんが、ボックスにスクロールバーが表示され、閲覧できるようにします。印刷する場合は隠れた内容まで出力される可能性があります。

overflow-xの使い方とサンプル

overflow-xプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
overflow-x: visible;
overflow-x: auto;
overflow-x: clip;
overflow-x: hidden;
overflow-x: scroll;

/* グローバル値 */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: unset;

overflow-xの実例

それでは実際にoverflow-xプロパティの書き方を見ていきましょう。以下の例は、幅を固定したコンテナの中に超過する内容を配置し、overflow-xの値を変更した時の比較です。

要素の外側へ内容がはみ出すかどうかは、テキストの折返しを制御するword-breakなども影響します。特に数字の羅列や長い英単語を扱う場合に合わせて指定して下さい。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 5rem;
	background-color: #eee;
	display: grid;
	grid-template: auto auto auto / 200px;
	gap: 1rem;
	resize: horizontal;
}
.samp_box div {
	margin: 1rem 0 0;
	padding: .5rem;
	border: 1px solid #999;
	background-color: #fff;
}
div h2 {
	margin: 0;
	font-size: 1rem;
}
div p {
	margin: .5rem 0 0;
}
#of_1 {
	overflow-x: visible;
}
#of_2 {
	overflow-x: hidden;
}
#of_3 {
	overflow-x: scroll;
}
HTML
<section class="samp_box">
	<div id="of_1">
		<h2>overflow-x: visible;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。</p>
		<p>123456789012345678901234567890</p>
	</div>
	<div id="of_2">
		<h2>overflow-x: hidden;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。</p>
		<p>123456789012345678901234567890</p>
	</div>
	<div id="of_3">
		<h2>overflow-x: scroll;</h2>
		<p>あいうえおかきくけこ。さしすせそたちつてと。</p>
		<p>123456789012345678901234567890</p>
	</div>
</section>

overflow-xに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する