Text overflow ellipsis

Everyone should know that using text-overflow:ellipsis attributes to implement an overflow of single-line text displays an ellipsis (...). Of course, some browsers also need to add width width properties.

1. Overflow: hidden;
2. Text-overflow: ellipsis;
3. 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.

2. Overflow : hidden;
4. Text-overflow: ellipsis;
6. Display: -webkit-box;
8. -WebKit-line-clamp: 2;
10. -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;

For example:

2. P {
4. Position:relative;
6. Line-height:1.4em;
8. / * 3 times the line-height to show 3 lines * /
10. Height:4.2em;
12. Overflow:hidden;
14. }
16. P::after {
18. Content:"...";
20. Font-weight:bold;
22. Position:absolute;
24. Bottom:0;
26. Right:0;
28. Padding:0 20px 1px 45px;
30. Background:URL(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
32. }

See Demo:

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:

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

DEMO:

2.jQuery plugin-jquery.dotdotdot

This is also convenient to use:

1. $(document). Ready(function() {
2. $("#wrapper"). Dotdotdot({
3. Configuration goes here
4. });
5. });

Download and detailed documentation address: Https://github.com/BeSite/jQuery.dotdotdot or http://dotdotdot.frebsite.nl/

Reference:
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/

Text overflow ellipsis