如何做到超长字母以及内含PRE的段落自动换行或者出现横向的滚动条啊？

等待解决的过程中，发现CSDN居然可以换我发的帖子的行。嘿嘿。就学习了CSDN。发现居然使用textarea实现的。
我也据此改成功的，把成果贴出来共享吧：
        
        <style>
          .WithBreaks { word-wrap:break-word;width:580;white-Space:pre;}
          .WithBreaks2 { word-wrap:break-word;width:665}
          .NormalValue { word-wrap:normal; width:600}
          .title0 {font-size:17px;font-family:arial;font-weight:bold;text-decoration:none;color:#FFFFFF;}
          A.title2:link {COLOR: #000000; TEXT-DECORATION: none}
          A.title2:visited {COLOR: #000000; TEXT-DECORATION: none}
          A.title2:active {COLOR: #000000; TEXT-DECORATION: none}
          A.title2:hover {COLOR: #000000; TEXT-DECORATION: none}          textarea.content
          {
          overflow-y:visible;
          border:0px;
          font-size:12px;
          font-family: Tahoma,Verdana,宋体,Fixedsys;
          line-height:150%;
          overflow:visible;
          border-width:0px;
          width:550px;
          height:40px;
          }
        </style>如何做到超长字母以及内含PRE的段落自动换行或者出现横向的滚动条啊？
我有两段测试代码：
<table border=1 width=400>
   <tr>
     <td>11
<textarea class="content" readOnly rows="1" cols="20">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</textarea>
</td>
     <td>
     </td>
   </tr>
</table>还有一段：
<table border=1 width=400>
   <tr>
     <td><textarea class="content" readOnly rows="1" cols="20">
     <br>
     <pre>左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>左单元格<br>
     </pre>
     
     </textarea>
     
     </td>
     <td>右单元格
     </td>
   </tr>
</table>