FF literal ellipsis

Write mobile phone page when encountered, more than two lines of text, more text needs to be omitted.

CSS code:

Overflow:hidden;
Text-overflow:ellipsis;
Display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

This is good, because the mobile phone page is not compatible with the FF browser to see the effect of the time, there is a lot of compatibility issues.

Baidu a bit, found useful after the wording, no compatibility problems! Convinced ~

Cross-Browser compatible scenarios

A relatively simple way is to set the relative positioning of the container height, with the inclusion of ellipses (...) Implementation of elemental simulation;

For example:

2. P {
4. Position:relative;
6. Line-height:1.4em;
8. / * 3 times the line-height to show 3 lines * /
10. Height:4.2em;
12. Overflow:hidden;
14. }
16. P::after {
18. Content:"...";
20. Font-weight:bold;
22. Position:absolute;
24. Bottom:0;
26. Right:0;
28. Padding:0 20px 1px 45px;
30. Background:URL(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
32. }

Study the

FF literal ellipsis