CSS

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.

overflow-x

　overflow-xプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た要素の横方向をどのように表示するのか設定する際に使用します。表示しないか、スクロールバーを表示するか、あふれさせるかなどを設定できます。

　overflow-xプロパティは、もともとは Internet Explorerの独自機能でした。新しく標準に追加されようとしている段階のプロパティであるため、旧いブラウザで閲覧するユーザーを考慮するなら、overflowプロパティを使用した方がいいかもしれません。

　機能としては overflowプロパティ と類似していますが、横スクロールバーのみが表示され、縦スクロールバーは表示されません。

　overflow-xプロパティは、デザインやインターフェースの観点から、縦スクロールバーのみを消したり、擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

値

　overflow-xプロパティは、以下の値の一覧のうち一つのキーワードで指定します。

visible
内容がボックスに収まらない場合、内容は切り取られず、パディングボックスの左右の辺よりも外側にはみ出して表示されることがほとんどです。overflow-yが hidden, scroll, auto のいずれかであり、このプロパティが visible である場合は、暗黙に auto に計算します。【初期値】
hidden
水平方向に内容がパディングボックスに収まらない場合、内容が切り取られ収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない。
clip
hidden のように、内容が要素のパディングボックスで切り取られます。clip と hidden の違いは、clip キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、display:flow-root; を使用して実現することができます。
scroll
水平方向に内容がパディングボックスに収まらない場合、収まらない部分はボックスからはみ出さない。ブラウザは内容が収まるかどうかに関わらず、通常はスクロールバーを表示します。プリンターははみ出す内容を印刷するかもしれません。
auto
ボックスに収まらない内容をどう表示するかは、ユーザーエージェントに依存する。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容が収まらない場合、ブラウザはスクロールバーを表示します。
no-display
内容がボックスに収まらない場合、display:none; が指定されたかのようにボックス全体が削除される。
no-content
内容がボックスに収まらない場合、visibility:hidden; が指定されたかのようにボックス全体が非表示となる。

初期値・適用対象・値の継承

初期値
visible
適用対象
置換されていないブロックレベル要素、および、置換されていないインラインブロック要素、ブロックコンテナー、フレックスコンテナー、グリッドコンテナー
値の継承
しない
計算値
指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、visible/clip はそれぞれ auto/hidden と計算される。
アニメーションの種類
離散値
モジュール
CSS basic box model
JavaScript syntax

object.style.overflowX="scroll"

Example of use

CSS source


div {
	border: 1px solid;
	width: 200px;
}
.c1 {
	overflow-x: hidden;
}
.c2 {
	overflow-x: scroll;
}
.c3 {
	overflow-x: visible;
}
.c4 {
	overflow-x: auto;
}

HTML source


<dl>
	<dt>overflow-x: hidden;</dt>
	<dd>ボックスの外側のテキストを隠す。
		<div class="c1">
			ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
		</div>
	</dd>
	
	<dt>overflow-x: scroll;</dt>
	<dd>常にスクロールバーを表示する。
		<div class="c2">
			ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
		</div>
	</dd>
	
	<dt>overflow-x: visible;</dt>
	<dd>必要に応じてテキストをボックスの外に表示する。
		<div class="c3">
			ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
		</div>
	</dd>
	
	<dt>overflow-x: auto;</dt>
	<dd>多くのブラウザでは scroll と同じ。
		<div class="c4">
			ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
		</div>
	</dd>
</dl>
overflow-x: hidden;
ボックスの外側のテキストを隠す。
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
overflow-x: scroll;
常にスクロールバーを表示する。
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
overflow-x: visible;
必要に応じてテキストをボックスの外に表示する。
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
overflow-x: auto;
多くのブラウザでは scroll と同じ。
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ