preタグで文字列が改行されずにはみ出る問題の対処法!

preタグで文字列が改行されずにはみ出る問題の対処法について解説します。preタグ内で文字を書くと画面幅内で折り返しが効かずは文字がはみ出て続きます。この問題をCSSをもちいて、画面幅内で折り返しが効くように改善します。

コンテンツ [表示]

  1. 1preタグで文字列が改行されずにはみ出る問題
  2. 1.1この問題の何がいけないのか?
  3. 2preタグは便利な機能を持っている!
  4. 2.1HTML内で書いた文章がそのまま反映される
  5. 2.2codeタグと相性がいい
  6. 3preタグで文字列が改行されずにはみ出る問題の対処法
  7. 3.1プレビューで挙動を見てみよう
  8. 4まとめ

preタグで文字列が改行されずにはみ出る問題

preタグを用いて文字を横に書くと、画面幅を超えて文字が永遠に続いてしまい、サイトを訪問した人はわざわざ横スクロールをして文字を読まなければならないです。

実際にどういった挙動になっているのか、分かりやすいようにpreタグを用いた場合とpタグを用いた場合を用意したので、プレビューで見てみましょう。

このようにpタグだと折り返しがなされていますが、preタグを用いた方は、折り返しなしで、画面幅を超えてずっと続いており、横スクロールをしないと続きを読めないということが分かります。

この問題の何がいけないのか?

近代、スマホ、タブレット、PCというようにデバイスの多様化が進んでいます。それに合わせて、画面サイズが多様化したことで、従来のPC用ウェブサイトでは表示が小さくなりすぎて、読めない、操作できない、という問題が出てきました。

そのため、現在はどのサイトにおいても画面サイズに合わせて、レイアウトやサイト構造を変えて表示する、すなわちレスポンシブデザインが求められています。

しかし、preタグを用いた場合、プレビューで見てもらったように、画面幅に合っておらず、レスポンシブデザインになっていないことが分かります。これが問題なのです。

Photo byTemplune

preタグは便利な機能を持っている!

このように上に挙げた問題があるからといって、preタグを使用しないというようには考えないでください。preタグには他にない便利な機能があるのです。

ここでは文章を書く際によく使うpタグと比較して便利さをプレビューを通して見ていきます。

HTML内で書いた文章がそのまま反映される

pタグ内で折り返して書いても改行が反映されない一方でpreタグだと折り返して書くと改行が反映されます。

実際にプレビューで見てみましょう。

このようにpタグだと改行されていませんが、preタグだと改行されていることが分かります。

またタグだと文字と文字の間に半角スペースを何個も空けると、エディターが自動で1つの半角スペースに修正するため、1個までしかスペースが空きませんが、preタグだと文字と文字の間に何個も半角スペースを空けることができます。

ではプレビューで確認してみましょう。
(全角スペースだとpタグでも何個もスペースを空けることが可能です。)

このように半角スペースを用いてpreタグ内で文字と文字の間のスペースを何個も空けることができます。

codeタグと相性がいい

HTML内にソースコードを記述する際に用いられるcodeタグですが、その際によpreタグも一緒に用いられます。

理由としてはソースコードのインデントを容易に揃えるためです。preタグを用いた場合とそうでない場合をプレビューで見てみましょう。

このようにpreタグと一緒に用いた方がインデントが揃っており、コードが読みやすいです。

preタグで文字列が改行されずにはみ出る問題の対処法

それではCSSを用いてpreタグ内の文字列を強制的に折り返す方法を見ていきます。

方法としては簡単です。

preタグにclass、またはid属性を付与します。
②属性に対してCSSでwhite-spaceプロパティにpre-wrapを指定します。

以上2点を追加するだけで問題を解決できます。

プレビューで挙動を見てみよう

それでは実際にプレビューでどのようにpre要素の折り返し改行が有効となるのか見てみましょう。

このようにCSSで設定してあげることで、画面幅いっぱいでpreタグ内の文字列が強制的に折り返されているのが分かります。

まとめ

以上preタグで文字列が改行されずにはみ出る問題の対処法の解説でした。

preタグは文章を書く際の非常に便利なHTMLタグの1つです。preタグで文字列が改行されずにはみ出るという問題に気をつけながら、使ってみてください!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次