善意提醒

如果您打开本站很慢,布局排版混乱,并且看不到图片,那么可能是因为您还没有掌握用科学的方法上网的本领。

2006-07-05

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

通常,搞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的样式。这样,就可以让表格宽度维持设计时的大小不变,或者通过指定相对宽度来维持一个固定的比率,而并不受单元格中内容的任何影响。在设计自适应屏幕宽度的标题列表表格时,这个技术也许会有些用处。

没有评论:

发表评论