CSS ellipsis の動きまとめ - Qiita

ellipsis の挙動についてハマったため、実際のデモを通してまとめました。 TL;DR デモ MDN での説明 まず、MDN の text-overflow の説明は以下になっています。 text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。 自分はこの説明では全く理解できなかったため、デモを通して試しました。 基本1 👍 block 要素は ellipsis が効く <div class="block ellipsis"> display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお </div> <div class="inline-flex"> <div class="block