WordPressで overflow: auto が効かない?!
私の使用している WordPress のテーマ内（ブラウザはChromeです）では、下図のような一行の長いコマンドラインなどを、枠の範囲を越えたときだけ横スクロールバーを表示して、あくまで一行にしたいことがあります。
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
通常、上のような結果を表示するには
<pre style=”background-color: #222222; color: white; padding: 10px; width: 300px; overflow: auto;“> と書きます。 <pre></pre>はその意味が、ソースの見たままを表示すると言う事なので、右にはみ出た部分に対する処理だけで良いとの考えによります。
ところが、次のように改行してしまいます。具体的には改行コードは入っていませんので単なる折り返しです。もちろんスクロールバーも現れません。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
これでは、overflow: auto が効いていないことになります。
ここで、登場するのが white-space というプロパティです。値には normal pre nowrap 等があります。normal はソース中の半角スペース、タブ、改行をすべて半角スペース（一つ）として解釈し、枠に制限が有れば改行します。
nowrap を試してみましょう。
<pre style=”background-color: #222222; color: white; padding: 10px; width: 300px; overflow: auto; white-space: nowrap;“> と書き加えます。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
改行したい a 行、b 行まで連続してしましました。
では、pre を試してみましょう。
<pre style=”background-color: #222222; color: white; padding: 10px; width: 300px; overflow: auto; white-space: pre;“> と書き直します。
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
Edge や IEでは nowrap は説明のとおり表示されていると思いますが、すぐ上のpre は無視され目的の表示はされていないはずです。ただしchrome でみて居られる方は目的どおり、スクロールバーが表示されています。これは <pre></pre> の中での white-space: pre; は無視せよという IE系の仕様に因ります。
では、最上部に示した例は、どのようにして Chrome でも IE系でも目的のスクロールバーが見えているのでしょうか？
実は <pre></pre> を使わず、<div></div> を使っています。もちろんテキストをコピー＆ペーストするだけで整形できるメリットは半減してしまいますが、最もシェアの高い2ブラウザ（Chrome と IE系）でほぼ同じ表示が出来るのはメリットです。また、WordPress に限って言えば、<br> を挿入していなくても、エディター上で単に改行（Enter）すれば <br> が入ったと解釈されます。
では、その表示タグを種明かしします。
<div style=”background-color: #222222; color: white; padding: 10px; width: 300px; overflow: auto; font-family: ‘ＭＳ ゴシック’;“> とします。
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
font-family で「ＭＳ ゴシック」を指定しているのは、<pre></pre> に貼り付けたいテキストが固定幅である為、この指定をしないと本文と同じプロポーショナル文字になってしまうからです。
Linux の事なども考慮するともう一工夫必要かも知れませんが、取りあえず私の場合は、この経験を元に IE系とChrome で同じ表示スタイルを目指したいと思います。