长字符串的剪裁(前台方式)

在前台的页面设计中，经常会被一些长的字符串导致整个页面非常混乱。

以往我们都会加上样式：overview:hidden;

很好问题解决了，但是新的问题又来了，我们需要过长的字符串隐藏后，在其后面加上”...“，如下：

你那可以看得到后面的点点点吗

注：若你看不到”...“，则说明你的浏览器不支持。

下面来看一下这个DIV的样式：

overflow: hidden; 
text-overflow: ellipsis; 
width: 150px;
white-space:nowrap;

关键在于：text-overflow: ellipsis;

这种方式支持IE6+，Chrome浏览器，切记要和overview:hidden; white-space: nowrap;一起使用。

（在下一篇，我将介绍后台的方法对长字符串进行剪裁，希望继续关注！）