CSS はみ出した要素の処理 overflow

こんにちは。レモンティーです。

今回は、はみ出した要素をどう扱うかを選べる
overflowについてです。

この間このブログで
一つの記事を表示しているときは問題なくても
ブログのトップページで最近の記事が並んで表示されているときに
枠から中身がはみだすことがありました。

こんな感じです

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

したにある文ともかぶってしまいます





これを解決してくれるのがoverflowプロパティです。

overflowプロパティには以下のような値が設定できます

・visible…そのまま表示。背景色とかつけなければこれがデフォルトです。

・hidden…はみ出た部分は表示しません。

・scroll…はみ出た部分はスクロールでみれるようになります。

・auto…自動。しばしばスクロールになります。

visibleはデフォルトなので先ほどの例と同じです。
他の三つを実際にみてみます。

・hidden

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

・scroll

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。

・auto

わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。


中身はこんな感じです

HTML

・hidden

<p class="test test1">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

・scroll

<p class="test test2">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

・auto

<p class="test test3">わくからはみだすとたいていのばあいこのようにたいへんふしぜんないんしょうをあたえます。</p>

CSS

.test{border:solid 2px black; width:180px; height:50px;}
.test1{overflow:hidden;}
.test2{overflow:scroll;}
.test3{overflow:auto;}


今回はこれでおしまいです
sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com