inline-blockで任意の位置で自動的に改行する – 続編

Yukimi Sato 4,708views 更新:2014年3月28日

以前の投稿ではちょっと簡素すぎてわかりにくかったかなと続編です。

レスポンシブデザインでは気軽に<br>タグって使えないですよね。
使うと改行の位置が固定されてしまう。
でも使わないと改行の位置がおかしなことになるのも問題。

例えば、

この度はAipo.comのユーザー登録、誠にありがとうございます。

という一文があるとします。
幅900pxでは一行で表示されても、
850pxでは下記のようになってしまった場合。

この度はAipo.comのユーザー登録、誠にありがとうございま
す。

これだと気持ちが悪いですね。
読点の後はまるっと改行したいと思いませんか?
その場合は

<span style="display:inline-block;">誠にありがとうございます。</span>

と読点以降をinline-block指定したspanでくくります。
そうすると、

この度はAipo.comのユーザー登録、
誠にありがとうございます。

という表示になります。
大雑把な説明ですが、こうやって使うことでレスポンシブデザインでも
読みにくくなるような改行を予め制御することができるようになります。

<br>タグを幅によってCSSで表示非表示させるよりも簡単な方法なので、
改行でお悩みの方は是非お試しください。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません