Webサイト上で英文を改行する
Webサイトにおいて英文は単語の途中で改行されないようになっています。なのでハイフン(-)や空白を含まない文章の場合、改行される事なく続きます。
これによって何が起こるかというと、Webサイトの枠をはみ出して文字が描画される…という現象になってしまい、意図した通りの配置ができなくなったり、汚く見えてしまう場合があります。
こうした見た目上の問題もありますが、操作性の問題も大きくなってきます。 Webサイトは通常であれば縦方向へスクロールして読む構成になっています。そこへ横方向にもスクロールをさせると、操作が大変になる事もあって、ものすごく読みにくくなってしまいます。
さらに横方向へのスクロール操作も加わると、記事を読み進める事が面倒になってきます。
また、検索エンジンから「スマートフォン対応できていない」と判断され、検索結果からの流入も減ってしまうかもしれません。
特にURLをWebサイトへ掲載した際にこの現象が起きやすく、またスマートフォンのような画面の横幅が狭い場合に遭遇する現象です。
特にスマートフォンが普及し、Webサイトの閲覧者の大多数がスマートフォンとなったこの状況では、放置するのは深刻かもしれません。
だからといって、br要素で強制改行…させてしまうと、表示する画面によっては意図しない位置で改行してしまう事になったり、情報が正しく読み取れない場合もあるので全然オススメできません。
ではどうするのか…？CSSを使いましょう。
折り返しに関する2つのCSSについて
折り返しを制御するプロパティとして「word-break」と「overflow-wrap（word-wrap）」があります。どちらも英文などの半角文字を途中で折り返させる時につかわれますが、2種類あるのでややこしいです。
word-break
「word-break:break-all;」を使った文章折り返し。 この仕様での折り返しは一切の禁則処理が無視されます。禁則処理とは、日本語で言えば句読点（。、）が文章の先頭に来ないようにしたりとか、「っ ゃ ゅ」などの小さな文字が先頭に来ないようにする処理の事です。文頭にあってはならないとされる物を正しく処理し、文章の先頭へ配置される事がないように処理してくれる機能です。
これが無視されるので、印象が悪くなる事もあったり、文章が読みにくくなってしまう事もあるので、あまりお勧めされていない方法です。
overflow-wrap（word-wrap）
overflow-wrap:break-word;（word-wrap:break-word;）を使う場合は、禁則処理が保持され、なるべく単語の途中で改行されないように処理されます。英文の場合、単語の途中での改行は基本的にはしないので、この方法で改行の処理を行うとかなり読みやすいように改行処理してくれるので、お勧めです。
「word-wrap」は「overflow-wrap」の旧称です。新しく規定された仕様では「overflow-wrap」の表記で動作します。
ですが未対応のブラウザでは旧称も合わせて記述する必要があります。
特別な理由がなければoverflow-wrap（word-wrap）を使おう
どうしても文字を幅一杯に敷き詰めたい！！というこだわりがあったり、何か特別な理由がない限り、「overflow-wrap（word-wrap）」を使った方が読みやすい形式を保ちながら上手に改行してくれそうです。文字を並べた時の美しさを重視する気持ちもわかるのですが、やはり読み手の事を第一に考えるべきところだと思います。
特に現代ではスマートフォンでの閲覧者が多くなっています。
機種によって画面幅が違うので、見る画面によっては意図した通りの表示にならない事が多いです。
こうした理由から制作者が改行位置を決めたとしても、なので意図的な改行はほとんど望めません。
またOSやブラウザによっても書体が変わったり、文字と文字のスペースも変わったりと、制御しがたいですね。
文章の構成を考えなおして、一行を少なくしたり、一文を短くできないかを模索するのもいいかもしれません。
洗練された文章の方が読み手もスッと入ってきやすくなるので、不要な表現はないか、読みにくさはないか・どこにあるか等々、考えてみてもいいですね。
オマケ：単語の途中で改行する場合はハイフン（-）で繋げる
どうしても単語の途中で折り返さなければならない場合、文末にハイフン（-）を付けて文章を次の行へ続けて書くようですが、これは最後の手段になります。単語の途中で折り返す事によって本来の意味が伝わらなくなってしまったり、読みにくくなってしまう事もあります。
文字を要素一杯にびっしりと並ぶのは見た目上美しくも見えますが、それによって文字が読みにくくなってしまっては意味がありません。
ですがどうしても折り返さなければならない場合も中にはあるので、一文を短くする工夫をしたり、構造を変えてみたりと、他の手段を試した後の最後に…しかたない…と使う判断を下すようにしたいものです。
CSSでhyphensを使えば文末で途切れる単語、ハイフンの処理を加える事ができるようです。
ですがCSS3での対応となるので、非対応のブラウザでは正常に動作しない事もあるので注意が必要です。
また、「lang=”en”」をしっかり指定しておかないと動作しないので、こちらにも注意ですね。
