【CSS】レスポンシブでの改行制御【備忘録】

折り返したくない文節があり、レスポンシブで改行を制御したい場合のcssの書きかた。

この場合、

◆html
<p>
<span class=”text”>あのイーハトーヴォの</span>
<span class=”text”>すきとおった風</span>
</p>
◆css
.text {
display: inline-block;
}

これで解決。

調整したい箇所を
display: inline-block;
の.textで囲む。

表示するに当たり、入りきらないとカラム落ちが発生。
→見た目としては改行されている。