关于表格内文字换行的再研究

通常，搞Web开发的都会遇到这个问题，就是苦心设计的表格被讨厌的一连串英文字符给撑破了。最常见的是自己开发的论坛或留言板，如果有一个情绪激动的家伙打了百来个英文的感叹号，那往往就会出现内容在这些感叹号上不换行，结果让表格撑破，页面变得乱七八糟。

解决这个问题的办法，相信很多朋友都知道了。通过CSS中指定几个样式，可以比较满意地解决这个问题。一个是word-break:break-all，一个是word-wrap:break-word，表格中的文字则还有一个是table标签的table-layout:fixed样式。这三个样式给定之后，就不会再遇到表格被文字顶破的问题了。

稍稍解释一下上面三个样式。word-break:break-all是让英文单词中部的换行成为可能，比如

beau
tiful

word-break样式还有另外两个取值。一个是normal，就是通常默认的，对中文断字而对英文单词不断的情况。另一个是keep-all，是对中文，准确地说是亚洲文字也不断字。然而，和字面上的理解意思不同，keep-all并不能让一个英文句子不被换行。要做到这一点的方法，稍后我会谈到。

word-wrap:break-word是让连续的符号（如!号）之间进行断字成为可能。这是解决那种一大串感叹号造成的问题的一个关键。没有这个样式的话，对连续符号的断字不会发生。

另一个关键是table-layout:fixed。它指明说表格不要去试图自己计算宽度，就按照HTML中定义的宽度来显示就好。只有当table-layout:fixed和word-wrap:break-word同时指定时，针对连续符号的断字才会正确发生。缺少table-layout:fixed，断字不会发生，表格仍被撑大。缺少word-wrap:break-word，则表格不会被撑大，但断字不会发生，超过显示区域的内容将被hide。


好了，知道了如何让所有内容都断字换行之后，另一个问题来了：如何让所有内容都不断字换行？

我们知道，即使指定word-break:keep-all样式，也无法阻止一个英文句子在空格处不被换行。而且汉字中的某些标点符号，浏览器也会很“智能”地把它给换行掉（起码IE会，这就足够了）。然而，一个好消息是，虽然要求不断字的情况远比要求断字要少见，但它的实现方法却相当简单。你只要把内容用<nobr></nobr>标签对括起来就行。被<nobr></nobr>标签对括起来的内容，浏览器绝对不会对它进行换行。只要记住这一点就很好办了。

不过，想让内容不换行的同时，通常并不希望表格宽度因此而变得不确定。因此，常常也需要指定一个table-layout:fixed的样式。这样，就可以让表格宽度维持设计时的大小不变，或者通过指定相对宽度来维持一个固定的比率，而并不受单元格中内容的任何影响。在设计自适应屏幕宽度的标题列表表格时，这个技术也许会有些用处。