解决表格被不间断的文字或标点符号撑大的问题

解决思路：
这种情况一般是有意输入不间断英文或标点符号引起的，一般出现在有客户端输入的地方，如留言板、论坛等。这里我们可以通过设置CSS属性word-break和word-wrap来解决。

具体步骤：
1.设置word-break属性为break-all。
<table width="200" height="100" cellSpacing="1" cellPadding="0" bgColor="#999999">
<tr>
<td style="word-break:break-all" bgColor="#eeeeee">
<script>document.write(new Array(100).join("d"))</script>
</td>
</tr>
</table>
2.上面的代码仅对字母有效，如果把脚本中的d换成!再看看，表格又被撑大了，如果你的IE版本在5.5以上，可以把代码中的word-break:break-all改为word-wrap:break-word，问题解决。
注意：word-wrap属性需要IE5.5+的支持，而word-break属性只需要IE5.0+。
提示：要让单元格里的数据在超出边界时用省略号代替，可以这样(for IE6+)：
技巧：
l 为了更好的兼容性，通常的做法是同时定义两个属性，并且加上table-layout属性。
<style>
table{table-layout:fixed;word-break:break-all;
word-wrap:break-word}
</style>
<table width="200" height="100" cellSpacing="1" cellPadding="0" bgColor="#999999">
<tr>
<td bgColor="#eeeeee">
<script>
var arr=new Array(100)
document.write(arr.join("d"))
document.write(arr.join("!"))
</script>
</td>
</tr>
</table>
l 对于IE6.0+，还可以让超出元素边界的文字省略，以省略号代替，如：
<style>
table{table-layout:fixed}
td{overflow:hidden;text-overflow:ellipsis}
</style>
<table width="200" height="100" cellSpacing="1" cellPadding="0" bgColor="#999999">
<tr>
<td bgColor="#eeeeee">
<script>
var arr=new Array(100)
document.write(arr.join("d")+"<br>")
document.write(arr.join("!"))
</script>
</td>
</tr>
</table>
特别提示
技巧中所给代码的运行效果如图2.1.2.3所示，可以看到无论是不间断字母“d”还是叹号“!”，在表格的边界内都要自动换行。

图2.1.2.3 强制文本在表格边界外换行

特别说明

本例用到的CSS属性有word-break、word-wrap、table-layout和text-overflow，其中还用overflow属性，在后面会有讲解。word-break 设置元素内的文字的换行行为，脚本特性为wordBreak；word-wrap设置当当前行超过元素边界时是否强行换行，脚本特性为wordWrap；table-layout设置表格布局的算法，脚本特性为tableLayout；text- overflow设置元素内文本溢出的处理，脚本特性为textOverflow。各属性的可选值及说明分别如表2.1.2.3~表2.1.2.6所示。
表2.1.2.3 word-break属性的可选值
可选值说明
normal允许在词内换行(默认值)。
break-all该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。
keep-all与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。
表2.1.2.4 word-wrap属性的可选值
可选值说明
normal允许内容顶开指定的容器边界(默认值)。
break-word内容将在边界外换行。
表2.1.2.5 text-overflow属性的可选值
可选值说明
clip不显示省略号(...)，而是简单的裁切(默认值)。
ellipsis以省略号(...)代替元素的溢出文本。
表2.1.2.6 table-layout属性的可选值
可选值说明
auto布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来(默认值)。
fixed固定布局的算法。表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定 width 属性，表格将按100%的宽度显示。