为了保证页面不被撑坏,网页上要经常处理断字的问题,原来对断字的方法一般都是直接在样式中加入"word-break:break-all"来处理,这样会导致一个问题,就是对于正常应该在单词间断的英文单词,也变成了在单词内断开,给人的感觉蛮奇怪的。
最近为了解决这个问题,研读了一遍CSS 样式表的手册,重新发现了样式 word-wrap:break-word的定义,如下:
______________________________________________________________________________________
内容容器边界,所谓的内容容器,就是如td,div等带有Width属性的HTML标
签。因此,我们只要指定<td> 标签的宽度,在加上该样式,就能保证断字断在合适的位置
了。
合适的位置:
1、 单词长度不大于内容容器长度时,在单词间断;
2、 若单个单词长度大于内容容器长度时,在单词内强制断行;
如下:
代码:
-------------------------------------------------------------------------
修改中还遇到一个小问题,关于th和td的差异的,顺便放这里吧。
TH:指定标题列。标题列将在单元格中居中并以粗体显示。
TD:指定表格中的单元格。
------ 一直没注意这两个的差异,以为是一样的呢,原来一直自己写样式,都把TH的默认样式给覆盖了~~
------ Rickel,2005-12-15
签。因此,我们只要指定<td> 标签的宽度,在加上该样式,就能保证断字断在合适的位置
了。
合适的位置:
1、 单词长度不大于内容容器长度时,在单词间断;
2、 若单个单词长度大于内容容器长度时,在单词内强制断行;
如下:
| 单词间断 | This is a test example |
| 单词内断 | This is the longgggggggest test |
代码:
<TABLE id=txt style="BORDER-COLLAPSE: separate" width=200 bgColor=#ffc080>
<TR>
<TD width=80px bgColor=#efe7d6>单词间断</TD>
<TD style="WORD-WRAP: break-word" width=120px bgColor=#efe7d6> This is a test example</TD>
</TR>
<TR>
<TD width=80px bgColor=#efe7d6>单词内断</TD>
<TD style="WORD-WRAP: break-word" width=120px bgColor=#efe7d6>This is the longgggggggest test</TD>
</TR>
</TABLE>
<TR>
<TD width=80px bgColor=#efe7d6>单词间断</TD>
<TD style="WORD-WRAP: break-word" width=120px bgColor=#efe7d6> This is a test example</TD>
</TR>
<TR>
<TD width=80px bgColor=#efe7d6>单词内断</TD>
<TD style="WORD-WRAP: break-word" width=120px bgColor=#efe7d6>This is the longgggggggest test</TD>
</TR>
</TABLE>
-------------------------------------------------------------------------
修改中还遇到一个小问题,关于th和td的差异的,顺便放这里吧。
TH:指定标题列。标题列将在单元格中居中并以粗体显示。
TD:指定表格中的单元格。
------ 一直没注意这两个的差异,以为是一样的呢,原来一直自己写样式,都把TH的默认样式给覆盖了~~
------ Rickel,2005-12-15