等幅フォントかつ折り返し有(結果)

結局以下のように対応

  • pre指定はやめ
  • 表示する内容を表示前に変換
    • 「 」(半角スペース)を「 」に
    • 改行を「<br>」に
  • 全体をスタイル「font-family: monospace;」で囲む

うーん、イマイチな対応だ、、

<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">
<!--
div.esepre{
    font-family: monospace;
}
-->
</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>
                  <div class="esepre">あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<br>
半角スペース0<br>
&nbsp;半角スペース1<br>
&nbsp;&nbsp;半角スペース2<br>
&nbsp;&nbsp;&nbsp;半角スペース3<br>
全角スペース0<br>
 全角スペース1<br>
  全角スペース2<br>
   全角スペース3<br>
                  </div>
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
          <tr>
            <td><br>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

※等幅の確認を加えたので変更前のものにも同様の記述も追加\(^−^)/