A Little Each Day

note to self

flexboxでword-wrapが効かない

こんにちは。本日はFlexboxのTipsを紹介したいと思います。

Flexboxは便利ですが、長い文字列を折り返す「word-wrap: break-word;」が効かない問題が存在します。

今回はその解決策を共有したいと思います。

flexレイアウト

まずは左側にサムネイルなど画像があり、右にテキストがあるよくあるレイアウトをFlexboxでつくります。

/* 親要素 */
.flex-box{
  display: flex;
}

/* 左子要素 */
.flex-left{
  width: 100px;
}

/* 右子要素 */
.flex-right{
  flex: 1;
  word-wrap: break-word;
}


わかりやすく色付けしていますが、右側のテキスト部分の文字列が折り返さず伸びてしまっています。

f:id:chi_kun:20161211013139p:plain


これはFlexboxに限らずTableなどでもword-wrapが効きません。(仕様なので仕方ないですね。。。)


この問題を解決するのに結構ハマってしまいましたが、意外と簡単に解決できました。


解決方法

長い文字列がある子要素のコンテナにmin-width: 0; を指定してあげればOKです。

.flex-right{
  flex: 1;
  word-wrap: break-word;
  min-width: 0;
}


これでブラウザを見てみると・・・

f:id:chi_kun:20161211015258p:plain


はい。きちんと文字列が折り返されていますね。

結構ハマっている人を見かけるのでお役に立てればうれしいです。



本日は以上です。