CSS implementation multiline text overflow display ellipsis (...) All Raiders

Ellipsis in IE can be used text-overflow:ellipsis, but a lot of browsers need to be fixed width, while FF these browsers do not support text-overflow:ellipsis settings, Here are a few tutorials for you to sort out the compatible browsers that show ellipses.

You should all know that using the Text-overflow:ellipsis property to implement a single line of text overflow displays ellipses (...). Of course, some browsers also need to add width widths properties.

The code is as follows	Copy Code
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 to introduce several methods to achieve this effect.

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

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

The code is as follows

Copy Code

Display:-webkit-box; The properties must be combined to display the object as an elastic telescopic box model. -webkit-box-orient must combine attributes to set or retrieve the arrangement of child elements of a telescopic box object. Text-overflow:ellipsis, which can be used for multiple lines of text, use ellipsis "..." to hide text that goes out of range. Overflow:hidden; Text-overflow:ellipsis; Display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;

This property is appropriate for WebKit browsers or mobile terminals (mostly WebKit) browsers.

Browser-compatible scenarios
A relatively straightforward approach is to set the relative positioning of the container height, with the containing ellipsis (...) the element simulation realization;

For example:

The code is as follows	Copy Code
p { position:relative; Line-height:1.4em; /* 3 times of 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; }

See Demo:

Here are some points to note:

Height is 3 times times as good as line-height;
The end of the omission is easy to use translucent PNG to do a dodge effect, or set the background color;
IE6-7 does not display content, so to be compatible ie6-7 can add a label to the content, such as <span class= "Line-clamp" >...</span> to simulate;
To support IE8, you need to:: After replacement into: after;
JavaScript Scenarios
JS can also be based on the above ideas to simulate, the implementation is also very simple, recommend a number of similar work to do a mature gadget:

1.clamp.js
Download and document address: Https://github.com/josephschmitt/Clamp.js
The use is also very simple:

The code is as follows	Copy Code
var module = document.getElementById ("Clamp-this-module"); $clamp (module, {clamp:3});

DEMO:

2.jQuery plugin-jquery.dotdotdot
This is also very convenient to use:

code is as follows	copy code
$ (document). Ready (function () {  $ ("#wrapper"). Dotdotdot ({   // configuration goes here  }; });