レスポンシブなサイトを実装する際に、モバイルなどエリアが小さくなる時にいい感じにテキストを改行させたい・デザイナーの要望で改行位置を固定させたいケースがあります。改行位置のためにメディアクエリで display を切り替えるのはイケてないので避けたく <wbr /> を使うことが多いのですが日本語だと<wbr /> でいい感じに改行されない問題に当たったのでメモ。
<wbr>は HTML の要素で、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。
cf. <wbr>: 改行可能要素 - HTML: ハイパーテキストマークアップ言語 | MDN
日本語だと <wbr /> が無視されて改行されてしまう問題
日本語のテキスト内に <wbr /> を置くだけだと、ブラウザに関わらず画面幅に応じてどこでもテキストが改行されてしまう。
英文なら <wbr /> が効くが、日本語文章の場合は <wbr /> があろうがなかろうが関係なく文字が折り返されてしまう。
これは単純にブラウザが英文なら単語などを認識できるが、日本語だと単語などを認識していないために起こっている現象だと思われる
結論 word-break: keep-all + overflow-wrap: break-word を指定すれば OK
word-break: keep-all だけだと、コンテナより長い語句があるとコンテナからはみ出してしまうので、overflow-wrap: break-word をあわせて指定するといい感じになる。逆に overflow-wrap: break-word だけだと <wbr /> 関係なしに折り返されてしまう。
Sample
See the Pen wbr test by KIKIKI (@kikiki_kiki) on CodePen.
word-break と overflow-wrap
word-break… 表示エリアの端に文字が来た時に、その文字が単語の途中かどうか関係なしに途中で改行させるかどうかoverflow-wrap… 表示エリアに収まらない単語が来たときに、単語の途中で改行させるかどうか
word-break とは対照的に、 overflow-wrap は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。
cf. overflow-wrap - CSS: カスケーディングスタイルシート | MDN
word-break
normal… 既定の改行規則を使用します。
break-all… CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
keep-all… CJK テキストの改行を許可しません。 CJK 以外のテキストについてはnormalと同じ挙動となります。
cf. word-break - CSS: カスケーディングスタイルシート | MDN
overflow-wrap
以前は word-wrap だったが、overflow-wrap に解明されたらしい
normal… 通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。
anywhere… あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。
break-word…anywhereの値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。
cf. overflow-wrap - CSS: カスケーディングスタイルシート | MDN
日本語鬼門。
おわり
[参考]
