用css, 使用‘...’代替文本长出的部分

原文：http://wfsheep.iteye.com/blog/2189013

当我们使用css的控制文本的时候，时常会出现文本的数据比容器宽的情况，这是因为用户的输入是不可控制的，而此时，为了获得较好的用户体验，可以采用在输入长度大于容器所能容纳的最大宽度时，用省略号代替长出的部分，这里有两种常用的方式：

css 方式

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

设置这三行后，大部分浏览器都会将超出的部分显示成下图的效果 

此处在ff中有些问题，因为ff不认识text-overflow: ellipsis;这个属性，可以通过max-width来进行控制。 
当然，如果需要在鼠标hover的时候展示出全文的话，关键在于将overflow属性置为inherit; 就可以了。

下面是我对原文第二钟js方法的看法：

原文介绍的js方法是直接使用substring来判断字数，然后再在末端加入“...”，但是感觉不好。

因为字母和汉字占位的大小不一样，应该通过正则表达式来判断是否为汉字，如果为汉字那么长度计算为2，通过计算长度来截取原有的文本。