word-break: break-word; が効いて word-wrap: break-word; overflow-wrap: break-word; が効かない場合とは？

Question

目的

Flexbox の中の要素に関して、長い英単語などが含まれるときに強制的に折り返しをさせたい。但し、1単語が1行に収まらないときのみにしたいです。

現状

• word-break: break-word; … 非標準だがMDNには記載あり
• word-wrap: break-word; …　標準（互換性のため overflow-wrap と併用）
• overflow-wrap: break-word; … 標準（互換性のため word-wrap と併用）

とりあえずこの3つと min-width: 0; を記載していますが、word-break: break-word; だけ効いて、ほかが全く効いていないように見えます。

• これは何故でしょうか？
• 非標準な解決策に見えるので、可能であれば標準的な解決策が知りたいです。

リンク

BASE64エンコードしたものも貼ってあります↓
(teratailには10000文字までしか入りませんでした)

Stylelint did not report word-break: break-word as invalid value · Issue #2907 · stylelint/stylelint

Answer 1

原因

この問題の主な原因は、flex アイテムの配置方法 (align-itemsプロパティ) です。flex アイテムに設定されるmin-widthプロパティの初期値とは関係がありません。

align-itemsプロパティを指定しない状態では、 flex アイテムの幅が flex コンテナの幅に合う (width: 100%みたいな感じ) ように動作します。そのため、 flex アイテムの子要素である長い URL にも、うまく折り返しが行われます (見本) 。

<div class="box1">
  <div class="box2">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

.box1 {
  display: flex;
  flex-direction: column;
  border: 3px solid yellow;
  align-items: stretch;  /* 初期値なので指定しなくても良い。 */
}
.box1 .box2 {
  border: 3px solid green;
  overflow-wrap: break-word;
}

しかし、初期値以外の値を指定すると、 flex アイテムの幅はアイテム内のコンテンツの幅となり、整列されます。そのため、overflow-wrapプロパティは折り返しをすることなく、長い URL は flex コンテナからはみ出します (見本) 。対して、word-breakプロパティは flex コンテナからはみ出そうになると、強制的に改行するので、質問文のような現象が起こります (たぶん) 。

.box1 {
  display: flex;
  flex-direction: column;
  border: 3px solid yellow;
  align-items: start;  /* 初期値から変更。 */
}
.box1 .box2 {
  border: 3px solid green;
  overflow-wrap: break-word;
}

解決策

width, max-widthプロパティを指定し、 flex アイテムにalign-items: stretchと同じ役割を設定することで、overflow-wrapプロパティは折り返しを行うようになります。

上記のことから、質問文のコードを修正すると、このようになります (コードが長かったので CodePen に上げました) 。

---

コメントへの返信

横方向 Flex で min-width: 0; が効くのに 縦方向 Flex で min-width: 0; が効かない点だけイマイチしっくりこない

回答文の最初のほうにも書いたとおり、「縦方向 Flex」で単語がはみ出す原因に、min-widthプロパティは一切関係がありません。
flex-direction: row;と、flex-direction: column, align-items: startを設定したときの2つの場合で、なぜ長い単語がはみ出るのかを以下に追記します。

flex-direction: row;の場合

min-widthプロパティの値が flex アイテムの内容 (折り返しを考慮しない時の単語の長さ) になり、これがflex-basisプロパティの値よりも優先して適用されるため、はみ出します。

このとき、min-width: 0;を設定すると、最小横幅の制約がなくなり、flex-basisプロパティの初期値が適用されます。その結果、 flex アイテムは flex コンテナの幅に合わせて伸縮するようになります。

flex-direction: column, align-items: startの場合

flexbox 特有の最小幅による制約は、主軸にかかります。今回考えている横幅方向は交叉軸のため、min-width: auto;の値は、 flexbox 特有のものとは別の算出値 (たぶん0) となります。そのため、min-widthプロパティは、はみ出してしまう問題と無関係だとわかります。

交叉軸における幅は、** flex アイテムの内容により決まります**。 (恐らく、このときにword-wrapプロパティによる単語の折り返しが、考慮されていません。) そのため、交叉軸における幅(今回はwidthプロパティの値)は、折り返しを考慮しない時の単語の長さとなり、 flex コンテナをはみ出します。 (ここで、もしもalign-items: stretch;を設定していれば、** flex アイテムの交叉軸における幅は flex コンテナと同じ幅になる**ため、長い単語がはみ出すことはありません。)

このとき、width, max-widthプロパティを使い、設定された横幅を上書きするか、 flex コンテナ以下の最大横幅値を設定することで、 flex アイテムが flex コンテナからはみ出さなくなります。

Comments

[s8_chu]

変な回答文になってしまった(時間ができたら書き直すかもしれない)。

[mpyw]

遅くなってしまってすいません！完璧な回答ありがとうございました、腑に落ちました

[mpyw]

Qiita にまとめさせていただきました！
（Qiitaアカウントリンクしようと思ったけどなさそうだったのでteratailに張っておきました）

Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26

横方向 Flex で min-width: 0; が効くのに 縦方向 Flex で min-width: 0; が効かない点だけイマイチしっくりこないです…あと一息なのにモヤモヤするｗ

[s8_chu]

> 横方向 Flex で min-width: 0; が効くのに 縦方向 Flex で min-width: 0; が効かない点だけイマイチしっくりこないです…あと一息なのにモヤモヤするｗ

説明を回答文に追記しました。ただし、まったく仕様を確認せずに書いたので、詳細で確実な情報が知りたい場合は、適宜仕様を確認してください。

[mpyw]

特殊な考え方をするのは主軸の場合のみなんですね。後ほど追記を引用して記事内容を改善させていただきます、本当にありがとうございました。

Answer 2

flex 絡みのバグを踏んでいる気がしないでもないですね。

確認手順

1. .NotificationCard__Body-sc-1xrzbu5-10 の word-break を外す（→はみ出るようになる）
2. .NotificationCard__RightColumn-sc-1xrzbu5-2 の display を全部外す（→まだはみ出ている）
3. .NotificationCard__Container-sc-1xrzbu5-0 の display も全部外す（→収まるようになる）

Comments

[mpyw]

なるほど… ちなみに Edge で開いてたら非標準とだけあっては word-break 効いてなくてはみ出てました…

[chitoku]

word-break は IE 出身のプロパティーなので本来効いてないのがおかしいという言い方もできますね

[mpyw]

word-break 自体は IE 出身ですが値の break-word はおそらく Chrome / Firefox あたりの独自仕様かな？

[mpyw]

break-all だと効きます

[chitoku]

ああ、なるほど道理で……。

Answer 3

仕様上の理由はわかりませんが、原因となる箇所はわかるかと思います。
（HTML構造をいまいち理解していないので変更することによって他に影響がでるかもしれませんが....）

まず単純な構造で word-break 、word-wrap、overflow-wrap の挙動を確認しました。

https://codepen.io/b7968/pen/yQENMB

親クラスに min-width:0; を指定するという謎仕様がありますが、指定することで改行されました。

記述しているCSSプロパティの下記を変更すれば、おそらく word-break 、word-wrap、overflow-wrap のそれぞれの指定で改行されるかと思います。

追記
chromeでしか確認してません...

要因となるプロパティは親クラスにあたる .bw0sYo に指定している align-items: flex-start; のようですね。
このプロパティを外すと改行されるようになりますね。

Comments

[mpyw]

手元の Chrome で word-break: break-word; を外す → align-items: flex-start; とベンダープレフィックスついてるつを外す

で確認できなかったのですが、手順なにか間違えてますか？

[mpyw]

ちなみに `min-width: 0;` はFlexboxのみに適用されるデフォルト値の `min-width: auto;` をFlexbox以外のデフォルト値と揃えるという意図で書いています。別の場所で `overflow-wrap: break-word;` がうまく動いている場所があるんですが、ここでは `min-width: 0;` が必須でした。

[7968]

こちらの環境だと下記で改行の確認ができました。

① iMCKzi の word-break: break-word; を外す
② bw0sYo の align-items: flex-start; を全て外す（ベンダープレフィックス含む）
③ bw0sYo に min-width: 0; を追加

（理解できていないというか、ちゃんと読み込んでいないので恐縮ですが....おい！ちゃんと読めよって話ですがｗ）
flex で min-width を指定しないと 単語の幅まで flex アイテムの幅が拡張されるとあったので、bw0sYo に min-width: 0; を指定しました。

◆`word-wrap:break-word;`がflexboxで効かない件
https://qiita.com/yuji38kwmt/items/ba8d59eb0abef1956bae#word-wrapbreak-word%E3%81%A8flexbox%E3%81%AE%E9%96%A2%E4%BF%82

◆flexbox レイアウトで内容がはみ出す理由
http://nanto.asablo.jp/blog/2016/04/03/8063943