『截字』是网页设计当中最头疼的事情了吧。

当字数超过容量，要么是超出，要么是换行，无论怎样都会破坏布局。要避免出现这种情况，就必须进行截字。截字的操作在前后端都可以做，也都应该做。其原因是无论那种截字，都会漏洞，所以双保险比较好。

先简单说一下后台程序截字会出现的问题。

1. 按字符数来截字的方法是错误。因为英文字母会比中文汉字要短，“超长的标题”就比“title”要长。
2. 按字节数来截字，也有些问题。我们可能会按照一个汉字等于两个英文字母来作为截字的标准。但是事实上，“MM”比“妞”就要长。
3. 即使是英文字母之间，长度也不同。最长的字母应该是“W”，最短的字母应该是“i”。所以不能通过字母的个数判断长度。

但是，无论如何，按字节数截字，多少可以大致控制长度，这是一个比较简单可取的方法。

好，说说前端的部分：

1. 在所有可变字段的地方，记得加上overflow:hidden。
   但这样做会带来一些负面的影响。首先overflow:hidden可能会让下拉框或浮动层也被截掉，要注意。第二，overflow:hidden会闭合元素（和overflow:auto一样的效果）。
2. 如果不想字数太多而换行，记得写上white-space: nowrap。
3. 反过来，如果不想字数太多而冲破宽度，记得写上word-wrap:break-word和word-break:break-all。当然，这个只对IE有效，而且非标准。如果想要在Firefox中也能自由换行，得用脚本，但我觉得太浪费客户端资源。

其实道理很简单。但是实际做的时候，每处记得考虑截字这个问题，确实不是那么容易。充分考虑健壮性，永远是对优秀程序员的要求，做网页也一样。

.orange_link .orange_link .orange_link a { color: orange; }
.orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
.orange_link a { color: orange;}

根据上次的结论：在IE6里，“a:hover”的优先级比“.orange_link a”高。说起来，a:hover还真是终极霸王的感觉～哈。

但是呢，很好玩的事情来咯。在IE6里面，“.orange_link .orange_link a”的优先级和“a:hover”一样高。请在IE6里面看下面的代码：

可以看到，“.green_link .green_link a”在“a:hover”后面，于是就生效了，而“.orange_link .orange_link a”在前面，就没生效。所以，它们是一个优先级的哦。

好了，最诡异的来了。我们试试看“.orange_link .orange_link .orange_link a”和“a:hover”的优先级。

结论是：IE6里，“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高。
以上的结论在:visited和:active也成立，但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。

最后再补充一点就是，IE6中，“a#blue_link”或是“#blue_link”的优先级比a:hover要高。这点上它没有出错。

所以，在IE6里面关于链接伪类的bug真的很疯狂～～大家一定要小心。为了避免这种优先级的bug，在写CSS的时候，尽量用显式的:hover来定义样式，不要指望只用.class a就能改变a:hover。

总结一下IE6里链接伪类（:hover，:visited，:active）的优先级的bug：

a#id  或 #id
    大于
.class .class .class a
    大于
a:hover
    等于
.class .class a
    大于
.class a

IE里面关于CSS优先级的bug其实挺多，所以这里还得来个第二篇。可预见的还有个第三篇，大家耐心。

这次讲的是有关链接伪元素的。CSS2.1规范里有明确的提到，类名和伪元素的个数是合并在一起计算的。换句话说，:hover的优先级，应该和如.highlight一样高。但是在IE 6里并不是这样的哦。看下面两个定义

a:hover{ /* 优先级 [0,1,1] */
    color: red;
}
div.green_link a { /* 优先级 [0,1,2] */
    color: green;
}

OK，注释里我已经写清楚了，“div.green_link a”的优先级比较高。但是请在IE 6里看下面的代码：

大家会发现，在IE6里面，a:hover的优先级比div.greenLink a高。并且，同样的结论在:visited和:active里面也有，但是:link却没有这个问题。另外，IE7和IE8beta1没有这个问题。