overflow ボックスのはみだし文字 コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

overflowプロパティの概要

ボックスのはみだし文字への対処CSS
clear
目的 divボックスなどで高さを小さく設定した場合にはみ出す文字をどう扱うかを設定する
使用 divなど
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: visible;">In fringilla ~ nisl. </div>

visibleがデフォルト値です。

auto
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: auto;">In fringilla ~ nisl. </div>

ブラウザの設定に依存します。どのように表示されるかは不確定です。レイアウトに大きく影響を及ぼすため、用いるべきではありません。

visible
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: visible;">In fringilla ~ nisl. </div>
hidden
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: hidden;">In fringilla ~ nisl. </div>

文字データはカットされているわけではありません。隠れて(hidden)いるだけです。

scroll
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: scroll;">In fringilla ~ nisl. </div>
clip
In fringilla convallis consequat. Proin scelerisque pretium pellentesque. Duis in lobortis leo. Ut dapibus a risus in dictum. Aenean condimentum dolor lacus, nec maximus tortor lacinia sit amet. Pellentesque ac venenatis ipsum. Morbi non pulvinar diam. In porttitor, ligula nec dignissim congue, massa mi aliquet enim, nec commodo nisi dolor porttitor nisl. 
<div style="width: 400px; height: 150px; margin-bottom: 100px; border: 1px solid #000000; overflow: clip;">In fringilla ~ nisl. </div>

overflowを使ったデザイン

CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの2つをフラグとして利用します。CSSのみで実現できる限界点の一つ。