質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3736閲覧

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

mpyw

総合スコア5223

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

4クリップ

投稿2018/11/25 09:14

編集2018/11/25 09:21

目的

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

ohpma👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

原因

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

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

HTML

1 2<div class="box1"> 3 <div class="box2">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div> 4</div>

CSS

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

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

CSS

1.box1 { 2 display: flex; 3 flex-direction: column; 4 border: 3px solid yellow; 5 align-items: start; /* 初期値から変更。 */ 6} 7.box1 .box2 { 8 border: 3px solid green; 9 overflow-wrap: break-word; 10}

解決策

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 コンテナからはみ出さなくなります。

投稿2018/11/26 09:38

編集2018/12/15 20:12
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2018/11/26 13:11 編集

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

2018/12/13 15:59

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

2018/12/13 19:04

Qiita にまとめさせていただきました! (Qiitaアカウントリンクしようと思ったけどなさそうだったのでteratailに張っておきました) Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26 横方向 Flex で min-width: 0; が効くのに 縦方向 Flex で min-width: 0; が効かない点だけイマイチしっくりこないです…あと一息なのにモヤモヤするw
s8_chu

2018/12/15 19:14 編集

> 横方向 Flex で min-width: 0; が効くのに 縦方向 Flex で min-width: 0; が効かない点だけイマイチしっくりこないです…あと一息なのにモヤモヤするw 説明を回答文に追記しました。ただし、まったく仕様を確認せずに書いたので、詳細で確実な情報が知りたい場合は、適宜仕様を確認してください。
mpyw

2018/12/16 08:39

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

0

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

確認手順

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

投稿2018/11/25 09:58

chitoku

総合スコア1610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mpyw

2018/11/25 11:37

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

2018/11/25 12:03

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

2018/11/25 12:06

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

2018/11/25 12:08

break-all だと効きます
chitoku

2018/11/25 13:10

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

0

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

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

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

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

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

イメージ説明

イメージ説明

イメージ説明

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

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

投稿2018/11/25 13:14

編集2018/11/25 14:23
7968

総合スコア253

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mpyw

2018/11/25 16:17

手元の Chrome で word-break: break-word; を外す → align-items: flex-start; とベンダープレフィックスついてるつを外す で確認できなかったのですが、手順なにか間違えてますか?
mpyw

2018/11/25 16:54 編集

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

2018/11/25 18:41

こちらの環境だと下記で改行の確認ができました。 ① iMCKzi の word-break: break-word; を外す ② bw0sYo の align-items: flex-start; を全て外す(ベンダープレフィックス含む) ③ bw0sYo に min-width: 0; を追加 (理解できていないというか、ちゃんと読み込んでいないので恐縮ですが....おい!ちゃんと読めよって話ですがw) 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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問