Css implements multi-line text overflow to display ellipsis (...) Overview

We should all know that the text-overflow: ellipsis attribute is used to overflow the display ellipsis (…) of a single line of text (...). Of course, some browsers also need to add the width attribute.

The code is as follows:	Copy code
Overflow: hidden; Text-overflow: ellipsis; White-space: nowrap;

However, this attribute does not support multi-line text overflow to display ellipsis. Here we will introduce several methods based on the application scenario to achieve this effect.

WebKit browser or mobile page
The WebKit browser or mobile terminal (mostly WebKit kernel browsers) page implementation is relatively simple, you can directly use the WebKit CSS extension attributes (WebKit is a private attribute) -webkit-line-clamp; Note: This is an unsupported WebKit property that 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:

The code is as follows:

Copy code

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. Text-overflow: ellipsis;. When multiple lines of text can be used, the ellipsis (...) is used. Hide text out of range. Overflow: hidden; Text-overflow: ellipsis; Display:-webkit-box; -Webkit-line-clamp: 2; -Webkit-box-orient: vertical;

This attribute is suitable for WebKit browsers or mobile browsers (mostly WebKit kernels.

Solutions for compatibility with browsers
A more reliable and simple method is to set the relative positioning height of the container and use the ellipsis (...) Element Simulation;

For example:

The code is as follows:	Copy code
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; }

View demo:

 

Note the following points:

The height is 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;
JavaScript scheme
Js can also be simulated based on the above ideas. The implementation is also very simple. We recommend several mature gadgets for similar work:

1. Clamp. js
Download and documentation address: https://github.com/josephschmitt/Clamp.js
Ease of use:

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

DEMO:

 

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

The code is as follows:	Copy code
$ (Document). ready (function (){ $ ("# Wrapper"). dotdotdot ({ // Configuration goes here }); });