这是一个很简单的组合技,灵活应用省略号。
缩减成这样一行。
直接看看这些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!)