Multi-Line overflow ellipsis

Multi-line ellipsis appears in recent projects ~

All I knew before was text-overflow:ellipsis~, but it turned out to be useful for one line of text.

And then look at all kinds of check and summarize

1. If you only use care WebKit the kernel browser ~ then ~ directly

Overflow:hidden;
Text-overflow:ellipsis;
Display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:5; (The number of rows you want to limit)

This is the most ~ simple ~ and can meet the adaptive, that is, beyond the height of the ellipsis, not exceeding the normal display.

2. But there's a bunch of unsupported browsers

p {

Line-height:1em;

Height:5em; (Note This method line-height and height settings are best with EM)

Overflow:hidden;

Position:absolute;

}

P:after {

position:relative;

right:0;

bottom:0;

Content: ' ... '

。。。 Here also need to complement the background white, make fast, block display, etc.

}

This method is to use the ellipsis to cover the final text, if not support after the use of a tag instead of

But! This method is too rigid ~ If the content does not exceed the limit height, there is an ellipsis?? = = Too weird, if you can guarantee that your content is

is a board, then use this bar, simple and fast.

If not satisfied ... So certainly will think to use JS to judge = = Ah good trouble

3. Then recommend you directly with the JS plugin jquery dotdotdot.js;

Direct after introduction

$ (' P '). Dotdotdot (); P's style is set up ~

Multi-Line overflow ellipsis