CSSで文字を折り返す「word-break」の使い方

この記事では、CSSで文字を折り返す「word-break」の動作確認を行いながら使い方の解説していく。「word-break」とは、横幅に合わせた文章の改行を制御するためのプロパティである。ただし、今のところCSS3では標準採用はされていない。

また、動作確認はChromeとSafariの2つで行った。ちなみにChromeは世界で60%以上のシェア率、Safariは20%弱を占めている。

「word-break」の動作の違い

word-break:normal;

word-break:normal;

word-breaknormalを指定すると、文章が自然な形で改行される。英文では単語を保ちながら改行されるが、日本語ではそうはならないようである。また、日本語では改行の位置がChromeとSafariで若干異なる。

英語におけるword-break:normalの挙動
英語におけるword-break:normalの挙動

日本語におけるword-break:normalの挙動
日本語におけるword-break:normalの挙動

word-break:break-all;

word-break:break-all;

word-breakbreak-allを指定すると、単語区切りを優先せずに横幅いっぱいで改行される。そのため、英文だと単語の途中でも改行されてしまい、非常に読みづらくなってしまう。日本語の場合はそれほど気にはならない。こちらも日本語において、ChromeとSafariで挙動が異なる。

英語におけるword-break:break-allの挙動
英語におけるword-break:break-allの挙動

日本語におけるword-break:break-allの挙動
日本語におけるword-break:break-allの挙動

word-break:keep-all;

word-break:keep-all;

word-breakkeep-allを指定すると、単語の途中では改行せず、単語の切れ目で改行される。英文では、normalを指定した場合と変わらない。また、日本語においてChromeでは句読点で改行されるが、Safariではまったく改行されなかった。

英語におけるword-break:keep-allの挙動
英語におけるword-break:keep-allの挙動

日本語におけるword-break:keep-allの挙動
日本語におけるword-break:keep-allの挙動

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazon
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazon
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazon

最後まで読んでいただきありがとうございました。

「この記事が参考になったよ」という方は、ぜひ記事をシェアをしていただけるととても嬉しいです。

今後も有益な記事を書くモチベーションにつながりますので、どうかよろしくお願いいたします。↓↓↓↓↓↓↓

あなたにおすすめ