我有两段测试代码:
<table border=0 width=400>
<tr>
<td>11
<div sytle="word-break:break-all;word-wrap:break-word;overflow-x:scroll;overflow-y:auto">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
</td>
<td>
</td>
</tr>
</table>还有一段:
<table border=1 width=400>
<tr>
<td><div style="width:100%;height:100;overflow-x:scroll;overflow-y:scroll">
<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>
</div>
</td>
<td>右单元格
</td>
</tr>
</table>不管怎么做,都做不到自动换行啊。我已经尝试了:
1、使用DIV来增加滚动条;
2、使用定长的表格;
3、增加换行的样式;
都不行啊。请教诸位大侠指点了。
我也据此改成功的,把成果贴出来共享吧:
<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>
因为字母是连着的,浏览器会把它认为是一个单词,不给换行,有空格的话div,td默认都是换行的