bug
Pocket

flexbox便利ですが、新しいプロパティなためちょいちょい詰まることがあってツラいことも…。

display: flex使ってる要素にはテキストの折り返しが効かないことがあったのでメモ。

結論から言うと、flexboxやめるか、「word-wrap: break-word」をやめて「word-break:break-all」にするか。

以下で比較してみてください。上から。

  • flexboxにword-wrap: break-word
  • display: table
  • flexboxにword-break:break-all

一番上だけ折り返しせずにはみ出してしまっています。

See the Pen ALqQpz by misumi (@mismith0227) on CodePen.

以下の記事ではみ出す理由が詳しく解説されていました。

flexbox レイアウトで内容がはみ出す理由

Days on the Moon

もう一つ参考記事

`word-wrap:break-word;`がflexboxで効かない件

Qiita @yuji38kwmt
Pocket

Category : Tag :