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

Source: Internet
Author: User

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 ...

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.