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-breakでnormalを指定すると、文章が自然な形で改行される。英文では単語を保ちながら改行されるが、日本語ではそうはならないようである。また、日本語では改行の位置がChromeとSafariで若干異なる。
word-break:break-all;
word-break:break-all;
word-breakでbreak-allを指定すると、単語区切りを優先せずに横幅いっぱいで改行される。そのため、英文だと単語の途中でも改行されてしまい、非常に読みづらくなってしまう。日本語の場合はそれほど気にはならない。こちらも日本語において、ChromeとSafariで挙動が異なる。
日本語におけるword-break:break-allの挙動
word-break:keep-all;
word-break:keep-all;
word-breakでkeep-allを指定すると、単語の途中では改行せず、単語の切れ目で改行される。英文では、normalを指定した場合と変わらない。また、日本語においてChromeでは句読点で改行されるが、Safariではまったく改行されなかった。
Webデザインのオススメ書籍
Amazonでお得に購入するなら、Amazonギフト券がオススメ！
＼Amazonギフトがお得／
コンビニ・ATM・ネットバンキングで￥5,000以上チャージすると、プライム会員は最大2.5%ポイント、通常会員は最大2%ポイントがもらえます！
Amazonギフト券
