Mobile page Implementation multi-line text overflow display ellipsis ...

Mobile Browser Type:

UC Browser, QQ browser, open Gate browser, Baidu Mobile browser, 360 Security browser, Google Browser, Sogou Mobile browser, Cheetah browser, other browser

Domestic UC and QQ, Baidu and other mobile browsers are based on the WebKit modified kernel, the domestic not self-developed core, like the domestic mobile phone operating system are based on Android modified

Because the mobile side (the vast majority of browsers based on the WebKit kernel), you can directly use the WebKit CSS Extension property -webkit-line-clamp (WebKit private property) Note: (This property does not appear in the draft CSS specification, but it works correctly in the WebKit kernel).

The CSS code is as follows:

1 Overflow:hidden; 2 text-overflow:ellipsis; 3 display:-webkit-box; 4 -webkit-line-clamp:2; 5 -webkit-box-orient:vertical;

1. Overflow:hidden; With this property set, the Text-overflow property will not take effect.

2. text-overflow:ellipsis; Use the ellipsis "..." to hide out-of-scope text content in the case of multiline text.

3. display:-webkit-box; You must combine the properties to display the object as an elastic telescopic box model.

4. -webkit-line-clamp:2; The number of lines used to limit the text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.

5. -webkit-box-orient:vertical; You must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.

Mobile page Implementation multi-line text overflow display ellipsis ...