CSS ellipsis の動きまとめ

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

TL;DR [デモ](https://svelte.dev/repl/6bf1aa6ee6e046aa8f8188117eb7cfbf?version=3.53.1)

## MDN での説明

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

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

https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

自分はこの説明では全く理解できなかったため、[デモ](https://svelte.dev/repl/6bf1aa6ee6e046aa8f8188117eb7cfbf?version=3.53.1)を通して試しました。

## 基本1

### 👍 block 要素は ellipsis が効く


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

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


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


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

```html
<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を指定すると効く

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


## 基本2

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

```html
<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 要素でも効く

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


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

```html
<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

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

https://svelte.dev/repl/6bf1aa6ee6e046aa8f8188117eb7cfbf?version=3.53.1

Happy ellipsis life!!