Contents
overflowとは
overflowとは、要素のボックスからはみ出た部分をどう扱うかを指定する、CSSのプロパティです。
初期値は overflow:visible; になっており、この状態では、はみ出た部分が、はみ出たままの状態で表示されます。
下は本来灰色の部分の中に文字を収めたい状態なのですが、初期値visibleでは文字がはみ出してしまいます。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
はみ出した部分を切り取る
overflow : hidden ;を設定することで、はみ出した部分を切り取ることができます。
上の初期値visibleでは、文字が灰色の背景からはみ出していましたが、hiddenを指定することで、そのはみ出していた部分が下のように切り取られます。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
はみ出した部分をスクロールさせる
overflow : scroll ;
文字をhiddenのように切り取ってしまうと、その文が読めなくなってしまいます。
そうなったときに使えるのが、この overflow : scroll ; です。
scrollを指定することで、はみ出た部分が隠れてスクロールできる状態になります。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
上記の3つの他にもoverflowの値はまだあるので
時と場合によってうまく使いこなしましょう！
