解决思路:
这种情况一般是有意输入不间断英文或标点符号引起的,一般出现在有客户端输入的地方,如留言板、论坛等。这里我们可以通过设置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%的宽度显示。