（例）【CSS】overflow-xの使用方法
See the Pen
overflow by linlin (@linlin098765)
on CodePen.
<h5>overflow-x: visible; を指定</h5>
<p class="sample" style="overflow-x: visible;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
<h5>overflow-x: hidden; を指定</h5>
<p class="sample" style="overflow-x: hidden;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
<h5>overflow-x: scroll; を指定</h5>
<p class="sample" style="overflow-x: scroll;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
<h5>overflow-x: auto; を指定</h5>
<p class="sample" style="overflow-x: auto;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
<h5>overflow-x: no-display; を指定</h5>
<p class="sample" style="overflow-x: no-display;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>
<h5>overflow-x: no-content; を指定</h5>
<p class="sample" style="overflow-x: no-content;">
あああああああああああああああ、いいいいいいいいいいいいいい
</p>p.sample {
width: 150px; height: 50px;
background-color:gray;
}【CSS】overflow-x：左右のはみ出た要素の表示方法
CSSのoverflow-xは、ボックス要素の範囲内に収まらない場合の左右について表示方法を指定するプロパティです。
- visible
ボックス要素からはみ出して表示される（初期値） - hidden
ボックス要素からはみ出す部分は非表示となる。スクロールも表示されない - scroll
ボックス要素からはみ出す部分は、収まらない部分ははみ出さない。スクロールが表示される - auto
ボックス要素に収まらない場合の表示方法はブラウザに依存する - no-display
ボックス要素に収まらない場合、ボックス要素そのものがdisplay:noneと同様に非表示となる - no-content
ボックス要素に収まらない場合、ボックス要素そのものがdisplay:hiddenと同様に非表示となる