-Webkit-line-clamp multi-line text overflow..., webkitlineclamp

-Webkit-line-clamp multi-line text overflow..., webkitlineclamp
I. Apply the CSS code:

.box {    width: 100px;     display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    overflow: hidden;}

HTML code:

<Div class = "box"> U.S. imports of Culturelle kicule probiotics 30 children's fruit LGG probiotics chewable tablets </div>

Effect:

American imports of Culturelle kangcuile probiotics 30 pieces of Children's fruit LGG...

Ii. Understanding

Note:-webkit-line-clamp is the private attribute of webkit and is an nonstandard attribute (unsupported WebKit property), which does not appear in the CSS specification draft.

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

Display:-webkit-box; attributes that must be combined to display objects as auto scaling box models.

-Webkit-box-orient must combine attributes to set or retrieve the arrangement of sub-elements of a telescopic box object.

 

Iii. Compatibility

This attribute currently only supports webkit browsers and is suitable for WebKit browsers or mobile terminals (mobile terminals are mostly WebKit kernels)

Cross-browser compatibility

A: A more reliable and simple method is to set the relative positioning height of the container and use the ellipsis (...) Element Simulation Implementation

P {position: relative; line-height: 1.4em; 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 ;}View Code

Note the following points:

The height is exactly three times the line-height;

The omission of the end uses the translucent png to reduce the light effect or set the background color;

The IE6-7 does not display content, so to be compatible with the IE6-7 can be adding a label to the content, such as using <span class = "line-clamp">... </span> perform simulation;

To support IE8, replace: after with: after;

 

B:Javascript (plug-in) Solution 

Js can also be simulated based on the above ideas, and the implementation is also very simple

1. clamp. jsEase of use:

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

 

2. jQuery plug-in-jQuery. dotdotdotThis is also very convenient to use:

$(function(){　　$("wrapper").dotdotdot({　　　　// configuration goes here　　});});

Extension: The ellipsis (...) is displayed when a single line of text overflows.

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