単語内や最後の1文字だけなど、中途半端な自動改行(折り返し)を避けたい

ウェブ上に掲載した文章は、描画領域の端で自動的に改行されて表示されます。英文ならスペースで区切られた箇所で改行されるために、あまりおかしな表示にはなりません。しかし、日本語文の場合は(句読点や長音の直前では改行しないといった禁則を除けば)どこでも改行できる規則なために、「単語の途中」や「最後の1文字だけ」などの、望ましくない中途半端な場所で自動改行されてしまうことがあります。

中途半端な自動改行(折り返し)例
最後の1文字の直前で自動改行されると、見た目のバランスが悪くなる

最後の1文字の直前で自動改行されると、見た目のバランスが悪くなる

右図は、見出し文「あなたの明日が動き出す」がウインドウの端で自動改行された表示例です。このように最後の1文字だけを残して改行されると、とても中途半端な見た目になってしまいます。しかし、このような表示はよく見かけます。

※例示に使った文言「あなたの明日が動き出す」は、2014年にリニューアルされたAll Aboutのサイトスローガンです。


 
望ましい改行(折り返し)例
望ましい自動改行(折り返し)位置

望ましい自動改行(折り返し)位置

1行に収まらないのなら、右図のようにもっと手前にある「発音した際の切れ目」などで改行される方が、読みやすくて見た目のバランスも良くなるでしょう。

では、途中に強制的に改行を入れてしまえば良いかというと、そうとも言えません。


 
強制的に改行すると、さらにおかしな表示になる例
さらに狭い画面では同様の問題がある

さらに狭い画面で同様の問題がある

例えば、「あなたの明日が」の後に<br>タグを打って強制的に改行し、「動き出す」を2行目に見せた場合は、とても狭い画面だと右図のような読みにくい3行に見えてしまう可能性があります。

また、強制的に改行してしまうと、充分に広い画面でも必ず複数行で表示されてしまうデメリットもあります。


 
あらゆる環境で望ましい自動改行(折り返し)を実現するには
したがって、充分に広ければ1行で表示し、狭ければ単語や意味の区切りなど「読みやすさを維持できる場所」で自動改行されるようにできると望ましいでしょう。例えば下図のようにです。

折り返さないと表示できないほど狭い画面でも、読みやすい位置で自動改行される例

折り返さないと表示できないほど狭い画面でも、読みやすい位置で自動改行される例


上図では、閲覧者の描画領域(ウインドウや画面など)の幅に応じて、以下のような折り返し規則で自動改行されます。

  • 描画領域の幅が充分に広ければ、1行で表示される。※図の上
  • 描画領域の幅が狭ければ、読みやすい位置で改行して2行で表示される。※図の左下
  • 描画領域の幅がさらに狭ければ、読みやすい第2の位置でも改行して3行で表示される。※図の右下

どの場合でも、改行位置は「描画領域の端」ではなく「助詞の直後」になっているため、2行になっても3行になっても読みやすさは維持できているでしょう。

バランスの悪い自動改行(折り返し)を避ける方法

今回は、閲覧者の画面サイズに関係なくバランスの悪い位置での自動改行を防ぎ、読みやすさが維持できる望ましい位置で自動改行させる方法をご紹介いたします。

HTML+CSSで改行位置を制御する
本記事で解説する方法は、HTMLとCSSで実現します。HTML側にも追記が必要なので、長い文章に適用するのは現実的ではありません。そもそも自動改行のバランスが気になるのは、見出しなどの「比較的大きな文字サイズで掲載する短い文」でしょう。本記事でも、そのような見出し部分に使うことを前提にしています。

自動改行(折り返し)を禁止するわけではない
HTMLには、自動改行を禁止する効果のある要素や属性があります。例えば、td要素に対して使うnowrap属性や、pre要素などです。しかし、これらを使うわけではありません。また、CSSには空白や改行の扱いを制御できるwhite-spaceプロパティがあり、自動改行を禁止することもできます。しかし、この方法も使いません(※)。

なぜなら、自動改行を完全に禁止してしまうと、本当に表示幅が足りずにどうしようもなく改行するしかない場面でも自動改行ができなくなり、横スクロールすることになってしまうからです。そうなると、読みにくさが増してしまって逆効果でしょう。

今回ご紹介する方法は、下記の仕様になっています。
  • 自動改行が必要なら、できるだけ読みやすさを維持できる場所で改行させる。
  • どうしても読みにくい位置で改行しなければ収まらないなら、その自動改行は容認する。
読みにくい位置で自動改行されるくらいなら横スクロールさせてでも自動改行を阻止する、というわけではありません。

※2003年に公開した本記事の初版では、white-spaceプロパティを活用して自動改行を阻止する方法を解説していました。当時は、これ以降でご紹介する方法がまだ使えなかったからです。

改行しても構わない「切れ目」の位置を教える感じ
今回ご紹介する方法は、「どうせ改行するならこの位置で改行してね」というように、望ましい区切り位置を指定する感じです。方法はとても簡単で、以下の2点だけを使います。

  • [HTML] span要素で、できるだけ改行されたくない範囲の塊を指定。
  • [CSS] displayプロパティの値「inline-block」を使ってインラインブロック化。

もし上記の説明だけで何をするのかが分かったなら、次のページ以降の解説を読む必要はありません。とても短い記述で済みますから、ぜひ試してみて下さい。

それでは次のページから、HTML+CSSを使って望ましい区切り位置で自動改行させる方法を見ていきましょう。