等幅フォントかつ折り返し有

テキストエリアに表示された内容をそのまま表示*1しようとする時に問題が発生。

安易にpreタグを使用すると今度は入力が優先されて１行が長いと横スクロールが発生し見難い状態に。(ﾉ∀`)ﾀﾊｰ

いい方法がないかなぁと思い探してみたところ

同じような事を考えてる人は既に居ました。

まず、preにスタイル「overflow: auto;」を指定しての中がスクロールする状態になった時iframeのようにスクロールバーが出てそこだけがスクロールするというもの。

pre{
width: 80%;
overflow: auto;
}
（中略）
ちなみに、Firefoxではwidthを指定しなくても正しくスクロールバーが付いたのだけど、IEだとwidthがないとスクロールバーが付いてくれない上、この例では左右用のスクロールバーが付いた分上下も狭くなってしまっている。ちょっと気持ち悪い。

動きとしては面白いけど当初の目的はスクロールをやめたいという事と
書いてある通りInternet Explorerでの動きがちょっと、、と思ったので
動作確認しただけで採用は見送り。

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */
調べてみると、これをpre要素とかに指定しておくと、preでも(normalと違い)改行を生かしたまま折り返してくれるらしい。

おー、これこそ私の求めていたもの！と思い以下のソースで実験。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<style type="text/css">
<!--
pre{
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}
-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#000099" alink="#ff0000">
<table border="0" width="100%">
  <tbody>
    <tr>
      <td valign="top">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#dddddd">
        <tbody>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
            <table cellspacing="0" cellpadding="2" width="100%" border="0">
              <tbody>
                <tr>
                  <td width="5" bgcolor="#2cbe2c"></td>
                  <td width="100%" bgcolor="#7ee9a7"><font color="#ffffff"><b>タイトル</b></font></td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
          <tr>
            <td><br>
            </td>
          </tr>
          <tr>
            <td>
            <table border="0" cellspacing="1" cellpadding="3" width="100%" bgcolor="#666666">
              <tbody>
                <tr bgcolor="#999999">
                  <td width="12"><br>
                  </td>
                </tr>
                <tr bgcolor="#ffffff">
                  <td>
                  <pre>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
半角スペース0
 半角スペース1
  半角スペース2
   半角スペース3
全角スペース0
　全角スペース1
　　全角スペース2
　　　全角スペース3
</pre>
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
          <tr>
            <td><br>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

すぐに確認できた環境と結果は以下の通り

Internet Explorer 6.0.2900.2180.xpsp_sp2(以下略;;´ー`): 折り返されず
Firefox 1.5: 折り返しOK
Opera 7.54u2: 折り返しOK
Opera 8.5: 折り返しOK

うーん、、ユーザが多いと思われるInternet Explorerで動かない、、どうしようヽ(;´Д`)ノ

*1:特に半角スペース