overflow-x
overflow-x CSS プロパティは、要素の内容が水平方向の境界線を超えてしまった場合に、どのように処理するかを指定します。内容を隠す、スクロールバーを表示する、あるいはそのまま表示することができます。
语法
overflow-x プロパティは、以下の値のいずれかを取ることができます。
visible: 内容はクリップされず、要素ボックスの外側に表示されます。hidden: 内容はクリップされ、残りの部分は見えなくなります。clip: 内容はクリップされ、残りの部分は見えなくなります。また、クリップされた領域にスクロールすることもできません。scroll: 内容はクリップされ、残りの部分を表示するために、ブラウザは水平スクロールバーを表示します。auto: スクロールバーを表示するかどうかは、ブラウザによって決定されます。
| プロパティ | 値 | 説明 |
|---|---|---|
| 初期値 | visible | 内容が要素ボックスの外側に表示されます。 |
| 適用先 | すべての要素 | すべてのHTML要素に適用できます。 |
| 継承 | 不可 | 親要素から継承されません。 |
示例
overflow-x: hidden
以下の例では、overflow-x: hidden; を使用して、水平方向にオーバーフローした内容を非表示にしています。
<div style="width: 200px; border: 1px solid black; overflow-x: hidden;">
これは長いテキストです。これは長いテキストです。これは長いテキストです。
これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
overflow-x: auto
以下の例では、overflow-x: auto; を使用して、内容がオーバーフローした場合にのみ、水平スクロールバーを表示するようにしています。
<div style="width: 200px; border: 1px solid black; overflow-x: auto;">
これは長いテキストです。これは長いテキストです。これは長いテキストです。
これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
overflow-x: scroll
以下の例では、overflow-x: scroll; を使用して、内容がオーバーフローしていなくても、常に水平スクロールバーを表示するようにしています。
<div style="width: 200px; border: 1px solid black; overflow-x: scroll;">
これは長いテキストです。これは長いテキストです。これは長いテキストです。
これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
规范
ブラウザの互換性
overflow-x プロパティは、すべての主要なブラウザでサポートされています。
| ブラウザ | バージョン |
|---|---|
| Chrome | 1.0+ |
| Firefox | 1.0+ |
| Safari | 3.0+ |
| Internet Explorer | 5.5+ |
| Edge | 12.0+ |
| Opera | 7.0+ |
関連情報
関連QA
Q1: overflow-x: hidden を設定しても、内容がはみ出て表示されてしまう場合は？
A1: 親要素にも overflow: hidden; を設定する必要がある場合があります。また、position プロパティの値によっては、期待通りに動作しない場合があります。
Q2: overflow-x: auto と overflow: auto の違いは？
A2: overflow-x は水平方向のみに適用されますが、overflow は水平方向と垂直方向の両方に適用されます。
Q3: overflow-x を使用して、スクロールバーを常に表示させることはできますか？
A3: はい、overflow-x: scroll を設定することで、スクロールバーを常に表示させることができます。