こんにちは朱夏です。
今回は、指定した要素内にテキストが収まらずにはみ出してしまった場合の対処方法を調べてみました。
テキストがはみ出したときは、「overflow」を使います。
「overflow」は、はみ出したテキストをどの様に表示するのか、又はしないのかを指定するCSSのプロパティです。
それではいってみましょう。
overflowの書き方
指定できる値と表示の違い
あとがき
overflowの書き方
「overflow」の基本的な書き方は以下の様になります。
|
1 |
overflow: visible; |
「overflow」プロパティの後ろに値を指定するだけ。
一番シンプルな構成ですね。
値についてはいくつかの種類があり、今回の例で指定したvisivleは、はみ出してもそのまま表示する設定です。
これが初期値になっているため、「overflow」プロパティを指定していない場合でも、はみ出したらそのまま表示されます。
指定できる値と表示の違い
「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つは正常に動作してくれない値でした。
今回は以上です。
次回もよろしくお願いします。
