标签：des style io ar os sp for div on
这是一个很简单的组合技，灵活应用省略号。
缩减成这样一行。
直接看看这些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！）
overflow,white-space,text-overflow组合技，省略号！
标签：des style io ar os sp for div on
原文地址：http://www.cnblogs.com/YikaJ/p/4094350.html
