How to continue intercepting long text display ellipses (multiple lines)

Remember the first blog write a single line of text overflow display ellipsis, today is to say how many lines of text overflow how to show ellipses?

In fact, is also a few days ago to do mobile end of the page received such a demand, originally thought that this can not be achieved, colleagues and I said-webkit-line-clamp properties, it went to check, sure enough

The PC side basically does not have this kind of demand, because this method compatibility is too bad, the browser share is not WebKit occupies the big head (especially celestial), sees the prefix to know only supports WebKit kernel, he belongs to WebKit internal attribute, and-webkit-text-size-adjust: None (this PC side is no longer supported, the mobile end can still be used) similar, but the mobile end is different, now the mobile end is basically the world of iOS and Android, this property is very useful, only to the WP and Firefox OS plus a max-height can prevent text overflow , but there is no ellipsis, if you do not need to support both max-height.

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/web/Skills/

Say so much or a chestnut http://jsbin.com/vefeb/1/.

<p> I want to implement multiple lines of text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I'm. To implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiple lines of text wrapping I want to implement multiple lines of text wrapping. I To implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiple lines of text wrapping I want to implement a multiline text wrapping. Implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiple lines of text wrapping I'm going to be doing a lot of text wrapping. Implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement multiline text wrapping I want to implement a multiline text wrapping </p>

p {
    Overflow:hidden;
    text-overflow:ellipsis;
    Display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

-webkit-line-clamp needs to be fitted with the two attributes of the Overflow:hidden text-overflow:ellipsis and telescopic models display:-webkit-box-webkit-box-orient: Vertical

If you are three lines overflow display ellipsis, that-webkit-line-clamp:3 in turn, four lines is 4, five elements is 5 ...

Of course you want all browser implementations are consistent, that also relies on JS, using a high comparison with a regular replacement to implement, instance link http://jsbin.com/vefeb/5/

$ (". Text"). each (function (i) {
    var DIVH = $ (this). Height (),
$p = $ ("P", $ (a)). EQ (0);
    while ($p. Outerheight () > Divh) {
        $p. Text ($p. Text (). replace (/(\s) * ([a-za-z0-9]+|\w) (\.\.\.)? $/, "..."));
    };
});