このブログでは、ソースコードを書く事が多いんですが、それをはみ出さずに表示する
HTMLとスタイルシートの書き方です。

ソースを書くのはいいんですが、説明するのが面倒なので、最近は
「パート派遣主婦のぐーたら子育て生活」の、かこに説明してもらっています。

で、サムネイル表示のソースをかこのブログにコピーしてもらったら、こんなコメントが
書き込まれていました。

２つ目の５行目ぐらい、めっちゃ文字がはみ出てるんですが、
こういうもんなんですか？

どうやら、ソースがはみ出ていたようです。ついでだから記事にしよう。

preタグ

preタグとは、書いたものをそのまま表示するためのタグです。

たとえば、次の通りのものがHTMLに書かれていたとします。

hello! I am Tom.
I am                  Japanese.

何故英文にしたかというと、２行目のamとJapaneseの間を半角スペースにするためです。
日本語だと全角スペースを使うので、結果が変わります。

とりあえず半角、全角は忘れて上の英文をそのままHTMLに書くと、こう表示されます。

HTMLで改行させるにはbrタグを使います。これを使わない限り、改行とはみなされません。
（ブログのエディタは改行を自動でbrタグに変換しています）

そして、半角スペースは何個続いても１個の半角スペースとみなされます。

その結果

hello! I am Tom.
I am                  Japanese.

と書いたものは

と表示されます。

しかし、これでは不便です。そういうときに使うのがpreタグです。

preタグとは、書いたものをそのままの状態で、書いたとおりに表示するものです。

ですから

<pre>hello! I am Tom.
I am                  Japanese.</pre>

と書けば、そのまま表示されます。

preタグで長い行をはみ出させないスタイルシート

しかし、ただpreを使うと、長い行があったときにはみ出します。

それを避けるためには、スタイルシートにこう書きます。

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

これで、はみ出さずに自動で改行されて表示されるようになります。

上のスタイルシートを適用したpreタグで、長いURLを次の行に表示します
var noImage='https://fanblogs.jp/ayzfqir5/file/384/LXVzci1sb2NhbC1hcGFjaGUyLWJsb2ctaW1hZ2UtcHJvZmlsZS1wcm9maWxlX2RlZmF1bHQxRtQ.gif';

ちなみに、全角スペースは続いた数だけ空白になります。便利なようですが、
スペースのために全角スペースを続けるのは出来れば避けて、preタグを使いたいです。

今回のスタイルシートは、どこか別のサイトを参考にしたのですが、前に調べたもので
どこのサイトに書いてあったかわからなくなりました。ただ、同じ記述は複数のサイトにあるので
今回は引用元の表記を、ごめんなさいさせていただきます。