【備忘録】文章が改行されない！「pre」要素を改行させる方法

こんにちは、ワタナベです！

先日コロナ禍後初、映画館へ映画を見に行ってきました♪
座席がソーシャルディスタンスで1席ずつ空いていたので個人的には快適でした。（業界的には…ですが）

今回はたまに修正依頼がくる、エディターを使ったときに文章が改行しない時の対処法備忘録です。

たまに「スマホで文章が改行しないので修正してください」と依頼がくることがあります。

だいたいその文章は99％の確立で「<pre></pre>」で囲まれています。
普通に入力したときにはつかないと思うのですが、誤操作やどこからかコピーしてきたときに<pre></pre>がついてしまってることが多いようです。

そもそも「pre」とは？

<pre>タグは、半角スペースや改行をそのまま表示する際に使用します。 <pre>とはpreformatted textの略で、日本語では「フォーマット（整形）済みのテキスト」という意味になります。つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。

<pre>～</pre>で囲まれた範囲のソースは半角スペース・改行などがそのまま表示されるため、 <pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、アスキーアートを表示する場合などに使用されます。

引用：HTMLクイックリファレンス

上記にある通り、打ち込んだ文字を打ち込んだとおりにそのまま表示したい時に便利なタグです。
cssなどでスマホの時は横スクロールが出るようにすることもできますが、サイトによってはスクロールバーを出したくなかったりそもそもpreタグを使う場面がなかったりするので、そういうときはpreタグで囲まれている文章が改行されるよう修正します。