做门户网站,常常会碰到这种情况,文章标题超出所在位置宽度。一般的做法有两种。

一种是程序截取字符串。

由于英文和中文字符所占字节不一样，标题并没有超出位置宽度，也截取了。这样还有个缺点，就是不利于SEO。

第二种是读取全部标题，用css的溢出隐藏，把多余的部分隐藏起来。这样就没有省略号,不知情的用户很难知道这个标题是否已经全部展现出来。如下图

很明显这个标题是没有全部显示出来，用chrome审查元素看完整标题是这样

这里介绍一种更好的方法用CSS控制标题溢出加省略号。代码其实很简单，只要3句就可以了

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


overflow: hidden; 就不多说了溢出隐藏
text-overflow: ellipsis; 当对象内文本溢出时显示省略标记（…）
white-space: nowrap; 规定段落中的文本不进行换行

这样效果就出来了，效果图

多出来的部分就会自动加3个点的省略号。这里还有个要求，一定要给这个类定义宽度。不定义宽度溢出隐藏就失效了。

还有这两个比较陌生的属性，IE6是兼容的，不必当心兼容问题。

本文为原创转载请注明出处 83