{ overflow-x 【 オーバーフロー・エックス 】 : 表示方法; }

{ overflow-y 【 オーバーフロー・ワイ 】 : 表示方法; }

overflow-x、overflow-yプロパティは、ボックスに収まらない内容の水平方向、垂直方向の表示方法を、それぞれ指定します。

初期値	visible
継承	なし
適用される要素	非置換のブロックレベル要素と非置換のインラインブロック要素
モジュール	CSS basic box model

値の指定方法

表示方法

値は半角スペースで区切って2つまで指定でき、1つ目は水平方向、2つ目は垂直方向に適用されます。1つだけ指定した場合は、水平・垂直方向に同じ値を指定したものと見なされます。

auto	ブラウザーの設定に依存します。通常はスクロールバーが表示されます。
visible	内容はボックスからはみ出して表示されます。
hidden	ボックスに収まらない内容は表示されません。
scroll	ボックスに収まるかどうかに関わらず、スクロールバーが表示されます。

サンプルコード

CSS

.tips{
  width: 400px; height: 50px;
  border: solid 1px black;
  overflow-x: auto;
  overflow-y: hidden;
}

HTML

<p>
渋谷駅の1番出口から改札を出て玉川通りを西に向かってしばらく歩くと、道玄坂上の交差点にたどり
着きますが、その角にコンビニエンスストア、サンプルマート道玄坂上店が見えてきます。
</p>

関連記事

• overflow　ボックスに収まらない内容の表示方法を指定する