ちょっと長めの見出しをレスポンシブサイトで表示すると、
PCでは
こんな感じで一行にすっきり表示されている見出し
が
スマホなどの幅の狭いデバイスになると
こんな感じで一行にすっきり表
示されている見出し
と
変なところで強制的に折り返されてしまうことがあります
今までは、対策として<br>タグを書いて幅の広いデバイスではdisplay:noneで隠していたのですが、もっとスマートな方法を思いつきました
<span class=”nobraking”>こんな感じで一行に</span><span class=”nobraking”>すっきり表示されている見出し</span>
と、「ここからここまでは途中改行されるとおかしい」と思う文節をspanでくくっておいて、それぞれにスタイルシートでdisplay:inline-blockを指定しておくのです
こんな感じで一行に
すっきり表示されている見出し
てな感じで回り込んでくれるはずです