word-breakとword-wrapの設定をしないと英語(半角英数字)が改行されない

業務でミスったのでメモ.

word-break

www.htmq.com

  • word-break : normal (デフォルト)

日本語・中国語・韓国語のような全角?文字は表示範囲に合わせて改行される.
しかし**英語のような半角文字は単語の途中では改行されず,単語の切り目で改行される.

  • word-break : break-all

言語に関係なく,表示範囲に合わせて改行される.
単語の途中で改行されることもある.

  • word-break : keep-all

言語に関係なく単語の途中では改行されず,単語の切れ目で改行される.

word-wrap

www.htmq.com

  • word-wrap : normal

単語の途中で改行しない.
必要に応じて表示範囲を拡大する.

  • word-wrap : break-word

必要に応じて単語の途中で改行する.

終わりに

word-break : break-all; word-wrap : break-word; と設定することで半角英数字が改行される.

CSS全部覚えられないので,逐一ググリながらやるしかないけど,
一度時間あれば,最低限のものは覚えておきたいなあ….