小ネタ:レスポンシブのページで改行位置を調整しよう!

ちょっと長めの見出しをレスポンシブサイトで表示すると、
PCでは

こんな感じで一行にすっきり表示されている見出し


スマホなどの幅の狭いデバイスになると

こんな感じで一行にすっきり表
示されている見出し


変なところで強制的に折り返されてしまうことがあります

今までは、対策として<br>タグを書いて幅の広いデバイスではdisplay:noneで隠していたのですが、もっとスマートな方法を思いつきました

<span class=”nobraking”>こんな感じで一行に</span><span class=”nobraking”>すっきり表示されている見出し</span>

と、「ここからここまでは途中改行されるとおかしい」と思う文節をspanでくくっておいて、それぞれにスタイルシートでdisplay:inline-blockを指定しておくのです

こんな感じで一行に
すっきり表示されている見出し

てな感じで回り込んでくれるはずです