概要
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>