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

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

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

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

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中也能自由换行，得用脚本，但我觉得太浪费客户端资源。

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

转载于:https://www.cnblogs.com/ddshou/archive/2009/05/05/1449801.html