コーディングをデザイン通りに行い、レスポンシブになってるか確認しますよね。
デザイン幅では、ぴったりでもいざ画面の幅を小さくすると、ビミョ～なところで改行されたりしませんか？
私は、画面幅の狭いiPhoneSEを使用しているので、Webサイトを見てると結構、微妙なところで改行されてるサイトを見ることがあります。
たとえば、こういうタイトルがあったとして、今は幅もちょうど良いので奇麗にみえます。
しかし、画面幅が狭くなると、折り返しが発生し、「う」だけ次行に改行され、見た目が物凄く気持ち悪いですよね
どうせ改行されるのなら文章の丁度良いところで改行した方が見た目もいいし、読みやすいですよね。
この改行を丁度よいところで自動で行う方法を解説致します。
改行したい文章を<span>で挟む
まずは、改行したい部分を<span>で挟みます。
上記の例でいうとこうなります。
<p>テキストを自動で<span>改行させよう</span></p><span>に「display: inline-block;」を設定する
<span>に「display: inline-block;」を指定します。
そうすることで、１行に収まり切れないときは、自動で改行してくれるようになります。
ただ、spanは頻繁に使用するタグになりますので、クラスを追加し、そちらに設定しましょう。
<p>テキストを自動で<span class="ib">改行させよう</span></p>.ib{
display: inline-block;
}自動改行完了
手順は以上になります。
それでは、実際に見て居ましょう。
１行に収まりきれる場合は、１行。
収まり切れない場合は、２行になりますね。
何行でも自動改行できる
上記の例は、２行でしたが、何行でも構いません。
自動で良い感じで改行してくれます。
コードは以下のようになります。
それぞれ改行させたい文章を<span>で挟みます。
<p>
テキストを自動で
<span class="ib">改行させよう、</span>
<span class="ib">そのためにはspanを使おう</span>
</p>まとめ
以上 半端なところで改行されないようにする方法でした。
また、テキスト整形関連で２行目以降を奇麗にインデントする方法を解説致します。
細かいところまで整えるのは面倒ですが、やるのとやらないのとじゃ見やすさも違いますのでご参考ください。
