word-break

CJK (中国語、台湾語、日本語、韓国語) で単語の途中で改行したくない場合に使う。

keep-all を指定した場合、CJK (中国語、台湾語、日本語、韓国語) のテキストを改行しない。それ以外の言語では normal と同じ挙動。

word-break: keep-all;

break-all を指定した場合、全ての言語において単語の途中であっても分割して改行する。(※英語の文章に break-all を使うと英単語が不自然な場所で途切れて読みにくいので注意が必要。非推奨。)

word-break: break-all;

参考:

word-break | MDN

word-break | CSSリファレンス

長い英単語を途中で折り返したいときの CSS の指定方法 | Days on the Moon

overflow-wrap/word-wrap

ボックスから文字がはみ出ないようにするためのプロパティ。

長い単語がボックスから溢れてしまう場合にのみ、単語の途中で分割して改行する。長い URL を折り返して表示したい場合などに使う。

overflow-wrap: break-word;

参考:

文字列の折り返しを表現する CSS プロパティ – Qiita

overflow-wrap | MDN

overflow-wrap | CSSリファレンス

word-wrap | CSSリファレンス

word-break と word-wrap はややこしい | W3G

改行しない (white-space)

white-space プロパティを指定することで空白の扱いを変更する。

途中で改行しない。ボックスの幅が指定されていても改行せず、ボックス内の文章全てが一行で表示される。通常通りに空白を一つにまとめるが、改行は行わない。

white-space: nowrap;

空白の扱いを通常通りに行う。連続する空白を一つにまとめる。(デフォルト)

white-space: normal;

参考:

white-space | MDN

white-space | スタイルシートリファレンス

CSS で文字列の折り返しをさせない方法 | UX MILK

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です