「break-allやbreak-wordとか、改行どうすりゃいいんだ問題」の解決法 #CSS

TL;DR

CSSの改行処理について悩ましい…
何度か悩んだが、自分の中で改行する場合(文字溢れ)のスタイルを決めた。

基本的には overflow-wrap: word-wrap; で改行
例外として、文字内容が制御可能な箇所に限り word-break: word-all; も可

サンプルコード

// 改行箇所: 単語で区切る
// NOTE: CSS2の仕様としてword-wrapがあったが、現状はoverflow-wrapに変わった。autoprefixerで自動処理してくれないので、pluginいれるか直書きしておく。
body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

※word-break: break-word;も、一見同等なスタイルに見えるけどCJK用のスタイルのために策定されたものなので、言語によって改行処理が異なる可能性があると考えられるため却下。
禁則処理もレンダリングしてくれてたので、これがいいと思う。

// 改行箇所: 幅で区切る
// NOTE: 基本的には使わず、あくまでCJK用のHack的に使う。例外のステートクラスとか作っておくと良いのかも。
.is-wordAll {
  word-break: break-all;
}

悩み箇所

😠 word-wrapが効いてない！

レンダリング時に横幅の計算ができてないので改行処理ができていません。
その場合は、widthなどを指定して対応。

https://w3g.jp/blog/confusing_word-break_word-wrap
こちらに詳しく対応方法の説明あったので参考にさせていただきました。

改行させないようにしたい

div {
  white-space: nowrap;
}

これが良いと思います。
word-break: keep-all; とか使いたいとこですが、これもCJK用なので使用しないほうが良さげ。

参考

https://w3g.jp/blog/confusing_word-break_word-wrap
https://developer.mozilla.org/ja/docs/Web/CSS/word-break
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow