cssのみで画面幅に応じて自動改行！意図したところで文字を折り返す方法

こんにちは。五平餅くんです。

今回は、実務でもよく使う改行のテクニックです。

テキストは、例えば中央揃えになっている時など、スマホで見ると改行位置がぐちゃぐちゃで読みにくくなっている、ということがよくあります。

今回は、「スマホぐちゃぐちゃ改行問題」の対策として、画面幅に応じて自動で改行するコーディングをご紹介します。

こういった細かい点までもきちっと対応してあげると、WEBサイトを訪問したユーザーにとっては嬉しく、発注者にはもっと喜ばれます。

ぜひ参考にしていただければ嬉しい限りです。

テキスト中央揃え（text-align: center）の改行で何も対策をしない場合

テキストの改行について何も対策をしないと、中央揃え（text-align: center）の時に、変な位置で改行をします。

何も対策しない場合のデモを見てください。

パソコン画面は良くても、スマホなどの小さい画面になると改行位置が中途半端で、読みにくさは増すばかり。

ここで有効なのが、画面幅に応じた自動改行です。

画面幅に応じた自動改行とは？

画面幅に応じた自動改行とは、画面幅によりテキストが改行となった際に、意図した場所で改行してくれるテクニックです。

下のボタンから具体例を見てみましょう。

ボタンをクリックし、開いたページで画面幅を縮めてみてください。

上の文章では、834pxあたりで改行が起こりますが、文末ではなく「ここで改行されるはずです。」のテキストが改行されています。

何も対策をしない場合をもう一度見てみましょう。

この場合、改行は文末から始まっているはずです。

ここがポイントなのです。

このテクニックでは、画面幅を縮めた際に意図したところで改行ができるので、あらゆる画面幅に対してテキストを綺麗に見せることが可能です。

パソコンなどの画面が大きい時は改行なしで、タブレットやスマホなどの小さい画面の時は指定した場所で改行あり、のような感じで表示できます。

画面幅が縮まった時の、改行の順番も指定できます。
二つ目の文章を、画面幅を縮めながらご覧ください。

この例では「１番最初に改行が起こります。」の後に「２番目に改行が起こります。」、そして「３番目に改行が起こります。」が最後に改行されるはず。

このように、自動改行される順番も指定できる、便利なコーディングです。

自動改行のコードはこちら

こちらが自動改行のコードになります。

<div class="inner text-center bg-gray">
  <p>自動改行です。<span class="ib">中央揃えの場合に使えます。<span class="ib">画面幅が縮むと</span></span><span class="ib">ここで改行されるはずです。</span></p>
  <p>テストです。<span class="ib">２番目に改行が起こります。<span class="ib">３番目に改行が起こります。</span></span><span class="ib">１番最初に改行が起こります。</span></p>
</div>

p {
  font-size: 20px;
}

.inner {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

.bg-gray {
  background: #f5f5f5;
}

.text-center {
  text-align: center;
}

.ib {
  display: inline-block;
}

改行させたい箇所を<span class=”ib”></span>で囲み、インラインブロック要素に変化させています（display: inline-block）。

基本的にはインラインブロック要素が文末に近いほど早く改行が起こります。

また、親要素のインラインブロックの方が早く改行が起こり、子要素のインラインブロック要素は親要素の次に起こります。

２つ目の文章で、「３番目に改行が起こります。」の部分を<span class=”ib”></span>の子要素のインラインブロック要素にしたのはそのためです。

このように、工夫してタグ付けしてあげれば、画面幅を気にして<br>を非表示にしたりしなくて済むという、便利なコードになります。

画面幅に応じた自動改行テクニックの注意点

このテクニックですが、注意点が一つだけあります。

それは、スマホなどの小さい画面では左揃えにする場合です。

例えば、PCではtext-align: center、タブレットでもtext-align: center、スマホではtext-align: leftにする場合、改行位置が↓の例のように改行が不自然になり、かえって読みにくくなります。

このようにスマホのみでtext-align: leftにする場合、先ほどご紹介した自動改行テクニックは使わない方が良いです。

こういった場合は、画面幅によって<br>を表示したり非表示にして改行を調整いただくと良いと思います。

その場合のデモはこちらをご覧ください。

また、コードはこちらになります。

<div class="inner text-center bg-gray">
  <p>タブレットだけ<br class="br-none br-none--tab-show br-none--sp-none" />ここで改行します。</p>
  <p>スマホだけ<br class="br-none br-none--sp-show" />ここで改行します。</p>
</div>

p {
  font-size: 20px;
}

.inner {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

.bg-gray {
  background: #f5f5f5;
}

.text-center {
  text-align: center;
}

.br-none {
  display: none;
}
@media screen and (max-width: 999px) {
  .br-none--tab-show {
    display: block;
  }
  .br-none--tab-none {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .br-none--sp-show {
    display: block;
  }
  .br-none--sp-none {
    display: none;
  }
}

※「.br-none」より上は変更なしです。

このように、「画面幅に応じた自動改行テクニック」も状況によっては使わない方が良い、ということも念頭に入れていただくと良いかなと思います。

というわけで今回は以上になります！

今回のテクニックを活用し、コーディングの品質アップに繋げていただけましたらすごく嬉しく思います。

最後まで読んでいただきありがとうございました！