テキストを<br>を使わずに改行させる

公開
テキストを<br>を使わずに改行させる。視覚的、感覚的にもわかりやすい!!


スキーマで入力したテキストを<br>を使わずに改行させる方法について解説します

今回のイメージ↓↓

先に答えを言うと
<br>を使わずに改行させる為にはnewline_to_brフィルターを使います!

今回解説するコード

{{ section.settings.text | newline_to_br }}

使い方

{{ section.settings.text | newline_to_br }}

使い方はめちゃめちゃ簡単です
末尾に| newline_to_brをつけるだけです

はい、たったこれだけで管理画面で入力したテキストと同じ位置で改行されます!

newline_to_brフィルターを使うとどうなる?

デフォルトの場合

特に何もせず(newline_to_brを使ってない場合)
そのままだと管理画面でテキストを入力し改行しても改行されません

デフォルトだと改行されない

<br>を使う場合

かといって、
<br>を使うとなんだか見にくいし、扱いにくいですよね。。

<br>を使って改行する

newline_to_brを使う場合

そんな時はnewline_to_brフイルターで解決!!

newline_to_brフイルターを使えばスキーマで改行したのがそのまま反映されます

newline_to_brを使った改行

詳しく解説

index.jsonの中身を見ると理解が深まります

※セクションをTOPページに追加したのでindex.jsonにテキストデータが入っています

赤線の部分に\n\nの文字列が入っているのわかりますか?

jsonファイルのデータに\nが入っている

管理画面上で改行すると\n\nの文字列がデータとしてjsonファイルに保存されます

\nとは?
改行を意味するエスケープシーケンスで、ブラウザ上では見えない文字です

公式ドキュメントのnewline_to_brの解説を見てもらうとわかるのですが
newline_to_brフィルターは\nの文字列を<br>に変換してくれます

newline_to_brの公式ドキュメントの記載

ですので
今回の場合は以下のように変換されています

■変換前
テキストダミーテキストダミー\n\n改行テキスト

■変換後
テキストダミーテキストダミー

改行テキスト

\nを認識して
を自動でつけてくれるの非常に便利ですね

CSSでも改行できる

p {
  white-space: pre-wrap;
}

今回newline_to_brフィルターを使った実装について解説しましたが、
実はCSSでも同じようなことが実現可能です

pre-wrapを使うことで改行文字や<br>要素があるときに改行されます

注意点

HTML上での改行も改行されてしまう!

<p class="c_test__text">
  {{ section.settings.text }}
</p>

<style>
  .c_test__text {
    white-space: pre-wrap;
  }
</style>

このような書き方をしてしまうと表示が崩れてしまいます

謎の余白で表示崩れが起こる

以下のように記述を変えれば余白が解消されます↓↓
HTMLで記述する際見やすいように改行してインデントを揃えますがpre-wrapを使う際は影響が出ます…

<p class="c_test__text">{{ section.settings.text }}</p>

  <style>
    .c_test__text {
      white-space: pre-wrap;
    }
  </style>

もし、CSSで実装する場合はHTML上で改行しないように注意しましょう!

まとめ

newline_to_brを使うことで管理画面上でわざわざ<br>を入力する必要がなくなります

この方が感覚的にわかりやすいしHTMLに慣れてない方も簡単に改行できますよね

CSSでのやり方もありますが
フィルター1つで実現できますし、HTML上での改行も影響しないので
私はnewline_to_brフィルターをよく使ってます!!

ぜひ、活用してみてください!!

各種リンク

Back to blog