今回は文章の改行を制御するCSSプロパティであるwhite-spaceと、近年のCSSではもはや当たり前になっているflexが引き起こす妙な相互作用についてお話します。
まずは少し話が反れますが、white-spaceをよく使用するポイントの紹介から。
テキストの省略をCSSで実現する
長い文字列を、「…」などで省略するデザイン、よく見かけますよね。
これは text-overflow を使用することでCSSのみで実装が出来ます。
See the Pen 01 by SekappyOfficial (@Sekappy) on CodePen.
サンプルにある3つのプロパティ
- text-overflow: ellipsis （領域からはみ出したテキストに省略記号を付ける）
- white-space: nowrap（領域の端までテキストが行っても折り返さない）
- overflow: hidden （領域のからはみ出した要素を表示しない）
を適用することで、1行に収まらないテキストを省略したデザインを実現することができます。
text-overflow – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
flexと合わせて使ってみる
さて本題です。
上記画像のようなデザインを実装したいとしましょう。
先ほど作成したテキスト省略向けの要素を、横並びのflexboxの中に突っ込んでみます。
See the Pen 02 by SekappyOfficial (@Sekappy) on CodePen.
サイトのデザインを破壊するレベルで表示が崩れてしまったと思います。
flexである親要素の幅の上限を超えて、子要素の幅が伸びてしまい、要素がはみだしてしまっています。何が起こっているのでしょうか。
解決法
まずは解決法から。
flexアイテムに min-width: 0; を適用しましょう。
See the Pen 03 by SekappyOfficial (@Sekappy) on CodePen.
表示が正常になりました。
原因
直接的な原因は、flexアイテムの min-width: auto の解釈が通常のブロック要素と異なり、 内包する要素全てが収まる最小サイズに設定される ことです。
min-width – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/min-width#auto
何もしていない場合、要素の min-width の初期値は auto に設定されます。
また、flexの幅を決めるプロパティである flex-basis よりも min-width の値が優先されてしまうため、先ほどの現象が発生してしまうわけです。
なので、該当のflexアイテムに対して min-width: 0 を適用することで、初期値であるmin-width: autoを打ち消し、要素の幅が適切に認識されるわけです。
white-spaceを使用しない場合でも、flexアイテムがflexコンテナを大きくはみ出してしまう状況が発生することがあると思います。
その際には、flexアイテムにmin-width: 0を適用することを試してみてください。
参考
html – white-space: nowrap breaks flexbox layout – Stack Overflow
https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
Flexbox からコンテンツはみ出る問題を完全に解決する #HTML – Qiita
https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26