改行位置を指定する(中途半端な場所で改行させない)

typing

レスポンシブデザイン等、画面サイズが異なった場合に改行位置がおかしなことになって文字が読みにくい!ということが多々あります。

・<br>で強制的に改行してしまうと広い画面の時に余分なスペースが出来すぎる
・<wbr>だと日本語では使えない。。

意外ときれいに文字を表示させられないものなんですよね~。

 

書くコードが増えて面倒ですが、spanを使って改行のコントロールができます。
CSSでinline-blockの指定をすれば、ウィンドウ幅が広い時には改行されず、狭くなった時にだけ指定した部分で改行してくれます。

HTML

<span class="br">改行を</span><span class="br">コントロールする

CSS

span.br{
    display: inline-block;
}