Back

6月 13 2016

WordPressで overflow: auto が効かない?!

私の使用している WordPress のテーマ内(ブラウザはChromeです)では、下図のような一行の長いコマンドラインなどを、枠の範囲を越えたときだけ横スクロールバーを表示して、あくまで一行にしたいことがあります。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
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

EdgeIEでは 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: ‘MS ゴシック’;“> とします。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

font-family で「MS ゴシック」を指定しているのは、<pre></pre> に貼り付けたいテキストが固定幅である為、この指定をしないと本文と同じプロポーショナル文字になってしまうからです。

Linux の事なども考慮するともう一工夫必要かも知れませんが、取りあえず私の場合は、この経験を元に IE系とChrome で同じ表示スタイルを目指したいと思います。

Back