レスポンシブの改行のバランスを自動で調節する方法【STUDIO】

見出しのテキストの改行位置が悪くて気になったりすることはありませんか？
ある程度は自分でコントロールできますが、STUDIOのレスポンシブ設定だけでは対応できない場合もあると思います。

例えば、テキストの1行目は画面いっぱいで折り返されて、2行目は1文字しかなかったりすると改行のバランスが悪く見えることもありますよね。

そんなときに役立つCSSのプロパティをご紹介します。

改行されたテキストの文字数を自動調節

※今回ご紹介する方法は、CSSを追加する必要があるので「カスタムコード」を編集します。なので、設定できるのはSTUDIOの有料プランのみになります。

追加するCSSは、「 text-wrap: balance; 」です。
STUDIOのカスタムコードに以下のように記述すればOKです。

<style>
  h2 {
    text-wrap: balance;
  }
</style>

↑のサンプルではh2タグに指定していますが、他のタグでも大丈夫ですし、idを付与して特定のタグのみに適用することも可能です。

それでは実際にどんな感じになのかご紹介します。

改行後のバランスの違い

動画の下側が text-wrap: balance を指定している場合です。

「text-wrap: balance」がない場合（動画の上側）は、ページ幅に収まらなくなった文字が2行目に落ちてくるので、ページ幅によってはバランスが悪いときがあります。

一方、「text-wrap: balance」を指定しているテキストの方は、改行されるタイミングで自動的に文字数のバランスを整えてくれます。

レスポンシブの改行について、もう少し具体的に説明します。

1行で表示できる場合

画像はページ幅が「430px」の時の表示です。

上側が「text-wrap: balance なしの場合」、下側が「text-wrap: balance ありの場合」です。

テキストが1行で表示できる場合は、「text-wrap: balance」の設定の有無による違いはありません。

テキストが改行された場合

次の画像は、ページ幅が「375px」の時の表示です。
ページ幅が狭くなったことで、テキストが折り返されています。

上側が「text-wrap: balance なしの場合」、下側が「text-wrap: balance ありの場合」です。

ページ幅が狭くなって2行に改行された場合は、↑の画像のように表示が異なります。

「text-wrap: balance;」を設定している方は、1行目と2行目の文字数のバランスがとれていてテキストの横幅がだいたい同じになります。

一方、「text-wrap: balance;」がない場合は、1行に入りきらない文字だけが2行目に改行されてしまうので、文字数のバランスはとれていません。

text-wrap: balance について

text-wrap: balanceを実際に使用した感想は以下のとおりです。

見出しなどに使いやすい

text-wrap: balance は、改行後のテキストのバランスが気になる箇所に使うと便利です。

なので、テキストが目立つ見出しやメインビジュアル内のテキストに使うと良いかなと思います。

逆にバランスが悪くなることも

text-wrap: balance を指定すると自動でバランスを調整しながら改行してくれますが、自分では制御できない部分なので逆にバランスが悪く感じるときもあります。

例えば、日本語の場合に「あと1文字だけ、1行目に残してくれたらいいのにな。」と感じる時があります。

文字数のバランスはよくても、日本語の区切りとしてバランスがおかしく感じる場合もあるので、実際に確認してみた方が安心です。
実際にチェックしてみ「text-wrap: balance がない方がバランスがいいな」と感じたら、使わない方がいいです。

まとめ

スマホやタブレットだけでも、様々なページ幅が存在するので「このデバイスならバランスがいいけど、このデバイスだとバランスが悪い」っていう場合もあります。

そんなレスポンシブの改行に困ったとき、「text-wrap: balance」で上手くいくケースもあるかと思うので、よかったら試してみてください。