CSS 日本語を単語の区切りで改行する方法(overflow-wrap: normal;が効かない場合にチェックするポイント)

    <!-- more -->

CSSで「overflow-wrap: normal;」を設定したのに意図した挙動にならないという人は「word-break」も設定しましょう

日本語の場合は改行ポイントの制御に「word-break: keep-all;」の設定が必要です

CSS 日本語を単語の区切りで改行する方法(overflow-wrap: normal;が効かない場合にチェックするポイント)

CSSなし

伊藤理々杏・岩本蓮加・梅澤美波・久保史緒里・阪口珠美・佐藤楓・中村麗乃・向井葉月・山下美月・吉田綾乃クリスティー・与田祐希・遠藤さくら・賀喜遥香・掛橋沙耶香・金川紗耶・柴田柚菜・清宮レイ・田村真佑・筒井あやめ・矢久保美緒・黒見明香・佐藤璃果・林瑠奈・松尾美佑・弓木奈於・五百城茉央・池田瑛紗・一ノ瀬美空・井上和・岡本姫奈・小川彩・奥田いろは・川﨑桜・菅原咲月・冨里奈央・中西アルノ

CSSあり

伊藤理々杏・岩本蓮加・梅澤美波・久保史緒里・阪口珠美・佐藤楓・中村麗乃・向井葉月・山下美月・吉田綾乃クリスティー・与田祐希・遠藤さくら・賀喜遥香・掛橋沙耶香・金川紗耶・柴田柚菜・清宮レイ・田村真佑・筒井あやめ・矢久保美緒・黒見明香・佐藤璃果・林瑠奈・松尾美佑・弓木奈於・五百城茉央・池田瑛紗・一ノ瀬美空・井上和・岡本姫奈・小川彩・奥田いろは・川﨑桜・菅原咲月・冨里奈央・中西アルノ

標準的な環境だと、日本語は単語の区切りとかに関係なく改行されてしまいます
そのため、たとえば人名が2行にまたがって表示されたりして見づらいことがあります

そういうときはCSSで

overflow-wrap: normal;
word-break: keep-all;

を設定しましょう

単語の区切りとなる「、。・」などの記号や半角・全角スペースの部分でいい感じに改行をしてくれて、単語が2行にまたがらないようにしてくれます

「CSS 改行」などでGoogle検索すると
まず「overflow-wrap」や「word-wrap」が出てくると思います
※overflow-wrapとword-wrapは同じもの

「overflow-wrap」のドキュメントには「normal」に設定すれば
「通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行する」と説明されています

これを指定すればいい感じに改行されるはずなのに、意図した表示にならない…
と悩んだんですが日本語の場合は別途「word-break: keep-all;」の設定が必要でした

「word-break」のドキュメントには「keep-all」の値は
「CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。」と説明されています

CJKというのは「Chinese, Japanese, Korean」(中国語、日本語、韓国語)のこと

「CJK テキストの改行を許可しません」というのは、「日本語の単語の途中で改行をしない」という意味です

このページは移転しました。