😇
Flexbox内でテキストを省略(ellipsis使用)できないバグの対応
(2018年にQiitaに書いた記事が今でも稀に通知が来るのでzennにも書いておきます)
Flexboxを使っていて、なんだかテキストの省略が効かないなと思うことが有りました。
問題が発生する条件
Flexbox内で、サイズ指定の無い親要素の中で文字省略しようとしてもできない。
(親要素のサイズを指定すれば文字省略されます)
よく有るパターン
Flexbox内で、一部要素をサイズ固定にし、残りを flex: 1
とする場合も省略されない。
(しかも、固定サイズも崩れる)
解決策
親要素に overflow: hidden
もしくは min-width: 0
を指定すると解決するようです。
個人的には oveflow: hidden
の方が直感的で分かりやすいかと思います。
Discussion