コーディング

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

  • このエントリーをはてなブックマークに追加
【備忘録】文章が改行されない!「pre」要素を改行させる方法

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

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

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

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

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

そもそも「pre」とは?

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

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

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

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

pre要素を改行させる!

pre {
white-space: pre-wrap;
}

上記のようにcssを設定してあげれば、「<pre></pre>」で囲まれている文章もちゃんと折り返し改行されるようになります!
preタグを意図的に使用する場面がない時はこの修正で十分だと思います。

▼ THANKS! ▼

 

それではまた次回。

ご閲覧ありがとうございました(^^♪

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ