CSS ellipsis の動きまとめ

ellipsis の挙動についてハマったため、実際のデモを通してまとめました。

TL;DR デモ

MDN での説明

まず、MDN の text-overflow の説明は以下になっています。

text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

自分はこの説明では全く理解できなかったため、デモを通して試しました。

基本1

👍 block 要素は ellipsis が効く

<div class="block ellipsis">
    display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>

例外🤔: 親が inline-flex の場合は効かない

<div class="inline-flex">
    <div class="block ellipsis">
        [parent] display: inline-flex;<br />
        [child] display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
    </div>
</div>

例外の例外1🤔🤔: 親が flex, grid, inline-grid だと効く

<div class="flex">
    <div class="block ellipsis">
        [parent] display: flex;<br />
        [child] display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
    </div>
</div>
<div class="grid">
    <div class="block ellipsis">
        [parent] display: grid;<br />
        [child] display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
    </div>
</div>
<div class="inline-grid">
    <div class="block ellipsis">
        [parent] display: inline-grid;<br />
        [child] display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
    </div>
</div>

例外の例外2🤔🤔: 親が inline-flex でも、widthを指定すると効く

<div class="inline-flex width100per">
    <div class="block ellipsis">
        [parent] display: inline-flex; width: 100%;<br />
        [child] display: block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
    </div>
</div>

基本2

👍 非 block 要素は ellipsis が効かない

<div class="inline-block ellipsis">
    display: inline-block; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお
</div>
<div class="grid ellipsis">
    display: grid; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>
<div class="flex ellipsis">
    display: flex; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>
<div class="inline ellipsis">
    display: inline; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>

例外🤔: width の指定があると、inline-block 要素でも効く

<div class="inline-block width100per ellipsis">
    display: inline-block; width: 100%; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>

例外の例外1🤔🤔: width の指定があっても、 inline-block 以外は効かない

<div class="flex width100per ellipsis">
    display: flex; width: 100%; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>
<div class="inline-flex width100per ellipsis">
    display: inline-flex; width: 100%; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>
<div class="inline-grid width100per ellipsis">
    display: inline-grid; width: 100%; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>
<div class="grid width100per ellipsis">
    display: grid; width: 100%; あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお 
</div>

まとめ

• ellipsis には block 要素を指定しよう
• inline-block につけたい場合は width を設定しよう
• 親が inline-flex の場合は、親に width を設定するか、 flex に変更しよう

確認ブラウザ

• chrome@107.0.5304.107
• firefox@107.0

※実際のデモは以下より確認ください。

Happy ellipsis life!!