単語途中での自動改行を回避するにはnowrapよりもinline-blockが便利

今のブラウザでも句読点や長音などを行頭には表示しないというような禁則処理はありますが、「できるだけ単語の途中では自動改行しない」という仕組みができると、もっと読みやすくなります。日本語の文章中でそうするのはあまり現実的ではありませんが、タイトルや見出しなど、短文を大きく掲載するような場合に使うと、読みやすくて便利そうです。

日本語のように単語の区切りが曖昧な言語で、単語の途中で自動改行されるのを防ぐ方法としては、昔はwhite-space(nowrap)などを使って改行禁止区間を設ける対処方法がありました。でも、改行禁止区間を設けてしまうと、「描画領域が狭すぎて、どうしても改行が必要な場合にでも改行されず、横スクロールが発生してしまう」という問題があります。
何もかもを自分1人で書く場合にはそれでも調整可能かもしれませんが、複数人で構築している場合には、うっかり改行禁止区間を長く取り過ぎて、横スクロールを発生させてしまうケースもありそうな気がします。

そこでお勧めなのが、改行を禁止するのではなく、spanなどで囲んだ単語にdisplay: inline-block;を指定する方法です。

改行を禁止するのではなく、単語のまとまりをインラインブロック化する

displayプロパティに値inline-blockを指定すると、その領域はブロックレベル要素っぽく表示されるものの、インライン要素のように配置されます。
これはつまり、

• その領域が一塊として表示される
• でも、どうしても必要なら内部で自動改行もされる

……という配置になります。
このdisplay: inline-block;を指定した範囲内に自動改行位置が来てしまった場合は、

1. そのブロックの直前で自動改行される。
2. でも、幅が狭すぎてどうしても表示領域が足りない場合は、ブロック内でも自動改行される。

……という表示になります。この(2)の存在がnowrap的な指定よりも便利です。

inline-blockで単語途中の自動改行を回避するソース例

例えば、以下のようなHTMLを書いておきます。できるだけ改行されたくない領域をspan要素で囲んでいるだけです。後からCSSを適用するために、ここではno-wrapというclass名を付加しています。

ここでは、
<span class="no-wrap">CSS(スタイルシート)</span>を使って
<span class="no-wrap">ウェブページ</span>を
<span class="no-wrap">デザイン</span>する方法を解説しています。

次に、CSSソースを以下のように記述しておきます。ここでは単に、displayプロパティに値inline-blockを指定しているだけです。たったこれだけで良いのでとても手軽です。

.no-wrap {
	display: inline-block; /* インラインブロック化 */
}

上記のようにHTMLとCSSを書いておけば、CSS(スタイルシート)、ウェブページ、デザインの各単語の内側では(できるだけ)自動改行されなくなります。
しかし、絶対に自動改行されないわけではなく、横幅に対して文字量が多いなどの都合で「どうしても改行せざるを得ない状況」では、ちゃんと自動改行されるため、横スクロールが必要になったり、横方向にはみ出してしまう事態は避けられます。

inline-blockが使えないブラウザは、もはや今となっては存在しないと考えて差し支えないでしょう。

(更新日：2017年08月30日)