【CSS】word-breakで文字の折り返し設定
この記事では、CSSで文字を折り返すword-breakの使い方をご紹介します。
word-breakとは、横幅に合わせた文章の改行をCSSで制御するためのプロパティです。ただし、現在（2020年）のCSS3では標準採用はされていません。
word-breakによってどのように表示が変わるのかブラウザで比較しながら解説していきます。また、表示の確認はChromeとSafariの2つで行いました。ブラウザによって挙動が異なるので使う時は注意しましょう。なお、Chromeは世界で60%以上、Safariは20%弱のシェアを占めてます。
「word-break」の動作の違い
word-break:normal;
normalでは、文章が自然な形で改行されます。
ただし、英語と日本語では動作に違いがあります。英語では単語を保ちながら改行されますが、日本語ではそうはなりません。また、日本語では改行の位置がChromeとSafariで若干異なります。
word-break:normal;
英語におけるword-break:normalの挙動
日本語におけるword-break:normalの挙動
word-break:break-all;
break-allでは、単語区切りを優先せずに横幅いっぱいで改行されます。
英語ですと単語の途中でも改行されてしまい、非常に読みづらくなってしまいます。日本語の場合は、単語の途中で改行されてもそれほど気にはなりません。日本語では、ChromeとSafariで挙動が異なります。
word-break:break-all;
英語におけるword-break:break-allの挙動
日本語におけるword-break:break-allの挙動
word-break:keep-all;
keep-allでは、単語の途中では改行せず、単語の切れ目で改行されます。
英語では、normalを指定した場合と変わりません。日本語では、Chromeでは句読点で改行されますが、Safariではまったく改行されませんでした。
word-break:keep-all;
英語におけるword-break:keep-allの挙動
日本語におけるword-break:keep-allの挙動
デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。
ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。
▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。
▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説しています。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。
