Multiple lines of text overflow display ellipsis (...)

Source: Internet
Author: User
We should all know how to use text-overflow:ellipsisproperty to implement a single-line text overflow display ellipsis (...). Of course, some browsers also need to add width widthProperty.

CSS code:

    1. Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

However, this property does not support multiple lines of text overflow display ellipsis, here according to the application scenario introduced several methods to achieve this effect.

WebKit a browser or mobile page

In WebKit browser or mobile (most of the WebKit kernel browser) page implementation is relatively simple, you can directly use the WebKit CSS extension properties (WebKit is a private property) -webkit-line-clamp ; Note: This is a non-canonical attribute (unsupported WebKit property), which does not appear in the draft CSS specification.

-webkit-line-clampThe number of lines used to limit the text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.
Common binding Properties:

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

    2. -webkit-box-orientYou must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.

    3. text-overflow: ellipsis;, you can use the ellipsis "..." to hide out-of-range text in the case of multiple lines of text.

CSS code:

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

This property is more suitable for browsers WebKit browsers or mobile (mostly WebKit cores).

Specific examples can be viewed http://www.php.cn/

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:

CSS code:

    1. p {    position:relative;    Line-height:1.4em;    /* 3 times the line-height to show 3 lines */    height:4.2em;    Overflow:hidden;} P::after {    content: "...";    Font-weight:bold;    Position:absolute;    bottom:0;    right:0;    padding:0 20px 1px 45px;    Background:url (http://www.php.cn/) repeat-y;}

Here are some points to note:

    1. Height is 3 times times as good as it is. line-height

    2. The end of the omitted to use the translucent PNG to do a dodge effect, or set the background color;

    3. Ie6-7 does not display content content, so to be compatible with IE6-7 can be to add a tag to the content, for example, <span class="line-clamp">...</span> to simulate;

    4. To support IE8, it needs to be ::after replaced :after ;

JavaScript Scenarios

JS can also be based on the above ideas to simulate, the implementation is also very simple, recommend a few to do similar work of the mature gadget:

1.clamp.js

Download and documentation address: http://www.php.cn/
The use is also very simple:

JS Code:

    1. var module = document.getElementById ("Clamp-this-module"); $clamp (module, {clamp:3});

2.jQuery plugin-jquery.dotdotdot

This is also convenient to use:

JS Code:

    1. $ (document). Ready (function () {$ (' #wrapper '). Dotdotdot ({//configuration goes here});
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.