CSS3 Multi-line ellipsis

-webkit-line-clamp Overview:

-webkit-line-clamp is a non-canonical attribute (unsupported WebKit property) that does not appear in the draft CSS specification.

Limits the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other foreign webkit properties. Common binding Properties:

• display: -webkit-box;You must combine the properties to display the object as an elastic telescopic box model.
• -webkit-box-orientYou must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.
• Text-overflow, which can be used for multiple lines of text, use the ellipsis "..." to hide out-of-range text.

Grammar:

-webkit-line-clamp:<number>

default value :?? is unclear;

applies to : block element

Inheritance : None

Animation : No

Calculated value : The specified value

Value:

<number>:

The

number of lines of text displayed by the block element.

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Compatibility:

support version \ Type	IE	Firefox	Safari	Chrome	Opera
Desktop	No	No	Yes	Yes	Yes (WebKit)
Mobile side	No	No	Yes	Yes	?

<! DOCTYPE html>Overflow:hidden;  Text-overflow:ellipsis;  Display:-webkit-box;  -webkit-line-clamp:2; -webkit-box-orient:vertical;">static: The object follows the regular flow. Attributes such as top,right,bottom,left are not applied. Relative: Objects follow a regular flow, and any element in the regular flow is not affected by the reference to its position in the regular stream through the Top,right,bottom,left property. Absolute: objects are detached from the regular stream, using attributes such as top,right,bottom,left for absolute positioning, and the box's offset position does not affect any element in the regular flow, and its margin does not collapse with any other margin. Fixed: The object is detached from the regular stream, using attributes such as top,right,bottom,left to position the window as a reference point, and the object does not scroll when a scrollbar appears. Center: object is out of regular flow and uses attributes such as Top,right,bottom,left to specify the position or size of the box. The box is centered vertically horizontally in its containing container. The offset position of the box does not affect any element in the regular flow, and its margin is not collapsed with any other margin. (CSS3) page: The position of the box is calculated as reference absolute. Box within a paged media or area block, the box's containing block is always the initial containing block, otherwise it depends on each absolute mode. (CSS3) Sticky: objects follow regular flow when they are normal. It is like a relative and a fixed fit, when on the screen in the regular flow layout, when scrolling out of the screen when the performance as fixed. The performance of this property is the adsorption effect you see in reality. (CSS3)*CSS3 New attributes may have descriptions of errors and changes, for reference only, continuous update</p></body>
CSS3 Multi-line ellipsis