【CSS】要素からはみ出したテキストを処理する方法【overflow】

CSS
スポンサーリンク

こんにちは朱夏です。

今回は、指定した要素内にテキストが収まらずにはみ出してしまった場合の対処方法を調べてみました。
テキストがはみ出したときは、「overflow」を使います。

overflow」は、はみ出したテキストをどの様に表示するのか、又はしないのかを指定するCSSのプロパティです。

それではいってみましょう。

 

[もくじ]
overflowの書き方
指定できる値と表示の違い
あとがき

 

overflowの書き方

overflow」の基本的な書き方は以下の様になります。

overflow: visible;

 

overflow」プロパティの後ろに値を指定するだけ。
一番シンプルな構成ですね。

値についてはいくつかの種類があり、今回の例で指定したvisivleは、はみ出してもそのまま表示する設定です。
これが初期値になっているため、「overflow」プロパティを指定していない場合でも、はみ出したらそのまま表示されます。

 

そもそもはみ出さない様にするために
divなどのbox要素からテキストがはみ出す場合、大抵は要素の幅を変に固定してしまっていることが多いです。
はみ出しそのものを回避するには、要素の縦横の幅を固定しない事が一番の解決策となります。
そもそも、画面サイズやウィンドウサイズが固定されていないのに、要素の幅を完全に固定してしまうのは、あまり良い選択ではないですよね。

 

 

指定できる値と表示の違い

overflow」で使用できる値は6種類あります。
それぞれ、どんな表示になるのか見ていきたいと思います。

 

visible

書き方の例でも出て来たvisibleは、はみ出してもテキストが表示される状態になります。

See the Pen
bGEbbyd
by 朱夏 (@syunatsu1)
on CodePen.

 

hidden

hiddenは、はみ出した分のテキストを非表示にします。
これが適用された場合は、はみ出した部分をブラウザ上で見ることは出来なくなります。

See the Pen
KKVPPjN
by 朱夏 (@syunatsu1)
on CodePen.

 

scroll

scrollこの値を指定すると、スクロールバーが表示されるようになります。
スクロールバーをスクロールさせると、全文見る事が出来ますが、スクロールバーが表示されている分、要素内の面積を圧迫する事になります。

See the Pen
wvMwwVa
by 朱夏 (@syunatsu1)
on CodePen.

 

auto

autoを指定した場合は、ユーザーエージェントに依存して表示方法が決まります。

See the Pen
mdVbdOb
by 朱夏 (@syunatsu1)
on CodePen.

 

no-display

no-displayを指定してはみ出した場合、該当の要素の表示がまるごと削除されます。
リファレンスなどの説明ではそのようなことが書かれていましたが、実際に確認してみると、何事もなかったかのようにはみ出した状態で表示されました(ChromeとEdge)。

See the Pen
KKVPKWq
by 朱夏 (@syunatsu1)
on CodePen.

 

no-content

no-contentを指定した場合は、該当の要素の表示をまるごと非表示にします。
こちらの値も、no-displayと同様にブラウザが反応してくれませんでした(ChromeとEdge)。

See the Pen
zYrOYWm
by 朱夏 (@syunatsu1)
on CodePen.

 

あとがき

というわけで、今回はoveaeflowについて書いてみました。
合計6種類のパターンがありましたが、そのうち2つは正常に動作してくれない値でした。

今回は以上です。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました