テキストを<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>を使うとなんだか見にくいし、扱いにくいですよね。。

newline_to_brを使う場合

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

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

詳しく解説

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

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

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

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

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

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

\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フィルターをよく使ってます!!

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

各種リンク

• newline_to_br
• pre-wrap