关于table设置换行的处理

   做html表格的时候，当固定了宽度的table，里面存在英文的时候，换行会检测英文，保留完整的单词。但是有时候我们不想自己的表格大小发生变化，应该怎么做呢？现在我们就这种情况下面的三个例子来说明一下。

   

   table宽度固定为210px。

   例子一：正常情况下的表格显示样式。

   

<p>例子一</p>
<table  style=" width: 210px" border="1"cellspacing="0" cellpadding="0">
<tr >
<th >aa</th>
<th >bb</th>

</tr>
<tr >
<td>aaaaa</td>
<td>aaaaa</td>
</tr>
</table>

   例子二：表格为了完整的显示表格中的英文单词，所以表格会被拉长。

   

<p>例子二</p>
<table style="width: 210px" border="1"cellspacing="0" cellpadding="0">
<tr >
<th >aa</th>
<th >bb</th>

</tr>
<tr >
<td >aaaaaaaaaaa aaaaaaaaaaaaa</td>
<td>hello world,You are so beautiful.helohelohelohelohelo</td>

</tr>
</table>

 

   例子三：设置表格随意换行（会把英文单词切割两行显示）,以保证表格大小不发生变化。

  

   

<table style="width: 210px;  word-break: break-all; word-wrap: break-word" border="1" cellspacing="0" cellpadding="0">
<tr >
<th >aa</th>
<th >bb</th>

</tr>
<tr >
<td >aaaaaaaaaaa aaaaaaaaaaaaa</td>
<td>hello world,You are so beautiful.</td>

</tr>
</table>
</body>

   三个例子显示结果比较：

  


   

   实现例子三的效果主要是加上word-break:break-all; word-wrap:break的style类型。