CSSリファレンス
実践向けCSSリファレンス

縦方向のはみ出し処理を設定する

CSS - overflow-x

概要

CSSプロパティ「overflow-x」は、overflow プロパティと同様、ボックス領域からテキストなどがはみ出した場合に、その部分をどう制御するかを指定することができます。ただし、overflow プロパティと違うところはこちらは水平(x軸)方向の制御になります。

<div class="hidden">コンテンツが幅200pxを超えた場合横スクロールバーが表示されます</div>
<style>
div {
  width: 200px;
  background-color: #def;
  margin-bottom: 10px;
  white-space: nowrap;
}
.hidden {
 overflow-x: scroll;
}
</style>

取りうる値

説明
visible初期値
hidden領域からはみ出た部分は非表示になる
scroll領域からはみ出る部分があるときはスクロールバーが表示される
auto閲覧する環境に依存

使用例

基本的な各値の例です。日本語テキストは初期値として自動的に文字を折り返すように指定されていますので、white-space プロパティに 「nowrap」 を指定することで文字の折り返しをしない制御をしています。

<div class="auto">幅と高さを指定したボックス領域からテキストがはみだした場合、閲覧するブラウザに依存する振る舞いをします</div>
<div class="hidden">幅と高さを指定したボックス領域からはみだしたテキストは表示されません</div>
<div class="scroll">幅と高さを指定したボックス領域からテキストがはみだすとスクロールバーが表示されます</div>
<div class="visible">幅と高さを指定したボックス領域からテキストがはみだしても、そのまま表示されます</div>
<style>
div {
  width: 200px;
  background-color: #def;
  margin-bottom: 10px;
  white-space: nowrap; /* 文字の折り返しを禁止する */
}
.auto {
 overflow-x: auto;    
}
.hidden {
 overflow-x: hidden;    
}
.scroll {
 overflow-x: scroll;    
}
.visible {
 overflow-x: visible;    
}
</style>

仕様書

関連CSSプロパティ

閉じる