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

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});