Add an ellipsis (o) to a single/multi-line text

Add an ellipsis (o) to a single/multi-line text

1. Add ellipsis in a single line of text

It is generally used to display news lists.

Li {width: 200px; height: 30px; line-height: 30px; cursor: pointer; list-style-position: inside;/* set the position of the list icon to inside, the default value is outside. When the overflow value is hidden, */overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} is truncated ;}

<! DOCTYPE html> 
Tip: add the title attribute to the text label with the ellipsis (...). The value is full text. When you move your cursor over the text, the complete content is displayed.
Core code:
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
Overflow
Value:
Visible: the content of an element is also visible outside the element box (overflow content is not clipped)
Hidden: the content of the element is cropped at the boundary of the element box, and the content beyond the cropping area is invisible.
Scroll: the content of an element is cropped at the boundary of the element box, but the browser displays a scroll bar to view other content.
Auto: if the content is clipped, the browser displays the scroll bar to view the remaining content.
Inherit
Initial Value: visible
Applied to: block-level elements, replacement elements, and form elements
Text-overflow text overflow
Value:
Clip: do not show the omitted mark (...), just simple cropping, equivalent to no effect
Ellipsis: when the text overflows, the omitted mark (...) is displayed. The omitted mark is inserted at the last character.
Initial Value: cilp
Applied to: block-level elements, replacement elements, and form elements
White-space whitespace
(Blank spaces refer to spaces and tabs. By default, HTML merges all blank characters into one space)
Value:
Normal: merges blank characters to allow automatic line feed.
Nowrap: combines blank spaces and does not allow line breaks.
Pre-line: combines blank characters (excluding line breaks) and allows automatic line breaks.
Pre: Do not merge blank characters and do not allow automatic line breaks
Pre-wrap: Do not merge blank characters. line feed is allowed.
2. The ellipsis is displayed at the end of multiple texts.
① Webkit browser or mobile page
 
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;
 
<! DOCTYPE html> 
Core code:
{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
Display:-webkit-box; displays the object as an elastic box model.
-Webkit-box-orient: sets or retrieves the arrangement of sub-elements of a telescopic box object.
-Webkit-line-clamp; Limit the number of lines of text displayed on a block element.
Tip: This attribute is a private attribute of webkit and only applies to webkit kernel browsers or mobile terminals.
② Cross-browser compatibility Solution
②-1: Set the relative height of the positioned container, and use the element containing the ellipsis (...) for simulation.
p{width: 200px;height:150px;border: 1px solid pink;line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}span{position: absolute;
bottom: 0;
right: 0;}
<! DOCTYPE html> 
②-2: Add ellipsis (...) through pseudo element simulation (...)
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}p:after{content: '...';position: absolute;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
bottom: 0;
right: 0;
}
Tip:
A. The height must be n (number of rows) times of line-height;
B. The ending ellipsis can be reduced by translucent png or set the background color;
C. The IE6-7 does not display content, the solution is as follows:
Introduce jquery and jquery. pseudo. js
　　
p{width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;overflow: hidden;position: relative;}span{after:'...';position: absolute;right: 0;bottom: 0;}
3. JavaScript Solution
A. Clamp. js
Download and documentation address: https://github.com/josephschmitt/Clamp.js
Usage:
var module = document.getElementById("clamp-this-module");$clamp(module, {clamp: 3});
B. jQuery. dotdotdot
Download and detailed documentation URL: Workshop/
Usage:
$(document).ready(function() {    $("#wrapper").dotdotdot({        //    configuration goes here    });});