Multi-line text overflow display ellipsis ...

"Single-line text overflow display ellipsis (...)

text-overflow:ellipsis-----Some browsers also need to add width width properties.

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

Multiple lines of text overflow display ellipsis

WebKit a browser or mobile page

page implementations in WebKit browser or mobile (mostly WebKit kernel browsers) are simple and can be directly used with 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.

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.css88.com/webkit/-webkit-line-clamp/

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;

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://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) 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: Https://github.com/josephschmitt/Clamp.js
The use is also very simple:

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

2.jQuery plugin-jquery.dotdotdot

This is also convenient to use:

$ (document). Ready (function () {    $ (' #wrapper '). Dotdotdot ({        //    configuration goes Here    });

This article references:http://www.css88.com/archives/5206

Multi-line text overflow display ellipsis ...