现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？
-webkit-line-clamp
Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。但是既然被人发现了，而且能用，为什么不试试呢~o(∩_∩)o
|
1 |
<span class="token selector" style="color:#A6E22E;">p </span><span class="token punctuation">{</span> <span class="token property" style="color:#F92672;">overflow</span> <span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Demo: http://jsfiddle.net/Cople/maB8f/
-o-ellipsis-lastline
从 Opera 10.60 开始，text-overflow属性有了一个名为-o-ellipsis-lastline的值。应用后的效果就像名字一样，在文本的最后一行加上省略号。这个方法比楼上的方法简单多了，可惜也不在标准之内//(ㄒoㄒ)//
|
1 |
<span class="token selector" style="color:#A6E22E;">p </span><span class="token punctuation">{</span> <span class="token property" style="color:#F92672;">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">height</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> <span class="token property" style="color:#F92672;">text-overflow</span><span class="token punctuation">:</span> -o-ellipsis-lastline<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Demo: http://jsfiddle.net/Cople/ash5v/
jQuery
除了各个浏览器私有的属性，有没有跨浏览器的解决方法呢？当然是通过js实现啦！（通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度）
|
1 |
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string" style="color:#A6E22E;">".figcaption"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword" style="color:#66D9EF;">function</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword" style="color:#66D9EF;">var</span> divH <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword" style="color:#66D9EF;">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword" style="color:#66D9EF;">var</span> $p <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string" style="color:#A6E22E;">"p"</span><span class="token punctuation">,</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword" style="color:#66D9EF;">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">eq</span><span class="token punctuation">(</span><span class="token number" style="color:#AE81FF;">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword" style="color:#66D9EF;">while</span> <span class="token punctuation">(</span>$p<span class="token punctuation">.</span><span class="token function">outerHeight</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> divH<span class="token punctuation">)</span> <span class="token punctuation">{</span> $p<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>$p<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex" style="color:#FD971F;">/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/</span><span class="token punctuation">,</span> <span class="token string" style="color:#A6E22E;">"..."</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Demo: http://jsfiddle.net/Cople/DrML4/5/
