【css】和文におすすめなtext-align : justifyを使用した時の英文の調整

テキストの両端をきれいに見せるためにtext-align : justifyを使用した際、英単語が文章中にあるとキレイに改行されないことがあります。

See the Pen
Untitled by nanami (@nanami_po)
on CodePen.

英単語が文章内にあるせいで、和文まで崩れています。

文章内に英単語などが入っていてもテキストの両端をきれいにそろえられるcssを、追加で指定してあげましょう。

コピペOK！実装例

まずは実装例です。

See the Pen
Untitled by nanami (@nanami_po)
on CodePen.

英単語が混ざっていてもテキストの両端がキレイに揃っています。

追記したcssは以下です。

word-break:break-all;
text-justify:inter-character;

ひとつひとつ解説していきますが、とりあえず上記のcssをコピペすれば実装可能なので解説不要な方は飛ばして大丈夫です◎

word-break:break-all;

word-breakはボックスからはみ出したテキストを改行させるかどうかを指定できるcssです。break-allで中国語、台湾語、日本語、韓国語以外のテキストにおいて、どの文字の間でも改行するようになります。

基本的に英単語は、どんなに長いスペルでも改行はしないようにデフォルトで指定されていますが、この記述により単語の途中でも改行が行われるということになります。

text-justify:inter-character;

文字の間隔を調整してくれる役割です。text-align : justify;が指定してあるのでなくても大丈夫ですが、よりきっちりと揃えたいなら指定しておいた方が良いです。

あくまで”テキストの両端をきれいに揃えたい”という要望を叶えたcss指定ですので、英単語の区切りがおかしくなってしまうのは目をつむるしかないんですよね…。

コンテナからはみ出したくはないけど禁則処理は守りたい！という場合はtext-align : justifyを諦めるしかありません。

ちなみに、overflow-wrapを使ったやり方もあります。overflow-wrapとword-breakの違いは、以下の記事がものすごくわかりやすかったので、よかったらそちらを参照してみてください。

#HTML･CSS