断字处理 break-word

      偶遇小技巧，记录之~ 分享.

      为了保证页面不被撑坏，网页上要经常处理断字的问题，原来对断字的方法一般都是直接在样式中加入"word-break:break-all"来处理，这样会导致一个问题，就是对于正常应该在单词间断的英文单词，也变成了在单词内断开，给人的感觉蛮奇怪的。
      最近为了解决这个问题，研读了一遍CSS 样式表的手册，重新发现了样式 word-wrap:break-word的定义，如下：
______________________________________________________________________________________

word-wrap      版本： IE5.5+专有属性　继承性：有

 
语法： 
   word-wrap : normal | break-word
 
参数： 
   normal : 　允许内容顶开指定的容器边界 
   break-word : 　内容将在边界内换行。如果需要，词内换行（word-break）也行发生 

说明： 
    设置或检索当当前行超过指定容器的边界时是否断开转行。 
    对应的脚本特性为wordWrap。
______________________________________________________________________________________

   -------------------------------------------------------------------------
       从这一段描述来看，break-word包含了wrod-break含有的两个属性，而且是根据需
   要采用word-break:normal 或者word-break:break-all 属性。
       断字处在内容容器边界，所谓的内容容器，就是如td，div等带有Width属性的HTML标
   签。因此，我们只要指定<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 > &nbsp; 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