Pure CSS Control text 2 lines show extra parts hidden

In the writing of the page, often encountered some places of text display 1 lines, the extra text hidden, so that 1 lines of good control: The CSS code is as follows:

1. White-space: nowrap;
2. Overflow: hidden;
3. text-overflow:ellipsis;

3 lines of code are done, this is common. But if 2 lines of text display superfluous hidden, i previously searched the internet a lot of said what with JS to control, with PHP control ... And so on, why not use CSS to control the same complex methods? Later found the answer, with CSS can also be used to control 2 lines of text display extra hidden.

1. text-overflow:-o-ellipsis-lastline;
2. Overflow: hidden;
3. text-overflow:ellipsis;
4. Display:-webkit-box;
5. -webkit-line-clamp: 2;
6. -webkit-box-orient:vertical;

More convenient is to change the value of Webkit-line-clamp can also achieve 3, 4, 5 and so on multi-line text display extra hidden effect ~ Source: 51799086

Pure CSS Control text 2 lines show extra parts hidden