概要

  • white-space空白で改行する/しない
    • normal空白で改行する (デフォルト)
    • nowrap空白で改行しない
  • overflow-wrap溢れる文字の扱いを設定する。
    • break-word単語の途中で分割して改行する。
  • word-break単語途中で改行する/しない
    • keep-all日中韓の文章においては単語の途中で改行しない。
    • break-all全ての言語において単語の途中であっても分割して改行する。※非推奨

空白で改行する/しない

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

改行する (normal)

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

white-space: normal;
改行しない (nowrap)

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

white-space: nowrap;

参考

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

white-space | HTML クイックリファレンス (htmq.com)

white-space | MDN

溢れる文字を折り返す

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

overflow-wrap: break-word;

参考

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

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

overflow-wrap | HTML クイックリファレンス (htmq.com)

word-wrap | HTML クイックリファレンス (htmq.com)

overflow-wrap | MDN

単語途中で改行する/しない

日中韓 (日本語、中国語、台湾語、韓国語) の文章において、単語の途中で改行したくない場合には word-break プロパティを指定する。

keep-all

keep-all を指定した場合、日中韓の文章においては改行されない。それ以外の言語では normal と同じ挙動となる。

word-break: keep-all;
break-all

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

word-break: break-all;

参考

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

word-break | HTML クイックリファレンス (htmq.com)

word-break | MDN

タグ:

コメントを残す

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