文本多行省略

前几天在群里看到有人发了一个链接,是一份面试题,里面有一道题是这样的:如何用CSS控制文本单行溢出省略?并且大致说出多行省略的思路。
单行文本溢出省略嘛,对于大家应该都是很容易的,我就不多做解释了,相关的代码如下

1
<p>阿里影业副总裁徐远翔的一番言论将其推到了风口浪尖,遭到众多编剧炮轰的原因不仅仅在于他言辞之间所透露的傲慢态度和对编剧的不尊重,更在于他所提倡的“颠覆性”编剧方式很难让人苟同。</p>

1
p{width: 100px;height: 24px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

那么多行省略呢?
多行省略可以用CSS3的一些个属性,CSS代码如下

1
p{width: 50px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

大家也看到了,用了webkit前缀,那么也就是说,只有webkit内核的浏览器才支持此写法。
这次的分享就到这里咯