overflow,white-space,text-overflow组合技，省略号！

　　这是一个很简单的组合技，灵活应用省略号。

缩减成这样一行。

直接看看这些CSS属性吧。

　　第一招是overflow，这个大家都很常见。它规定了当内容溢出元素框发生的事情，一般值就三种，默认的visible，直接修剪掉的hidden，还有产生滚动条的scroll(或者auto)。我们要做这种省略框，自然是要用到hidden属性的。overflow:hidden.

　　第二招是white-space，这个大家用的很少。顾名思义就是，处理元素内的空白。一般我们用到的值也就是两种，一种是pre，一种是no-wrap。pre值，当然就和HTML标签里的<pre>一样啦，会保留你的HTML结构内定义的空白符和换行符。这个不是我们做省略号的重点，就不详细说明了（什么？你还没看过，赶紧去W3C看看这个标签吧，很酷的）。我们说一下第二个属性，no-wrap，也就和pre相反，一直不会换行，直到遇到了<br>（换行标签）。下面我们来看看仅仅用no-wrap属性的效果图。看看它是如何不换行的。

　　第三招是text-oveflow，这个可是CSS3属性，虽然说它是CSS3属性，可是连IE6也强力支持呢。text-overflow属性有两个值，一个是默认值clip剪裁，一个是ellipsis省略号。第一个剪裁，也没什么好说的啦，就是生硬的切掉！（措词有点...）。那ellipsis就是我们要的好东西，它规定文本溢出元素框会自动转变为省略号，十分美观优雅。

　　最后这三个在一起就可以形成省略号的效果，而且缺一不可噢。——即使你文本再长，在元素框里也就成了省略号的渣渣。

　　在我做模拟项目的时候，就多次用到了这个属性。防止有人起名字起的特别长，防止影院名字过长。所以这个组合技用在未知文本长度的地方效果各位优秀。

　  （能写一篇这样渣渣的经验文也可以看得出，我CSS比JS渣呀，大前端，HTML CSS JS必须齐头并进，特别是酷炫的不得了的CSS3！）