CSS implementation single-line, multiline text overflow display ellipsis (...)

One, single-line text overflow display ellipsis (...)

Ellipsis in IE can use text-overflow:ellipsis, but there are a lot of browsers need fixed width, and ff these browsers do not support text-overflow:ellipsis settings, Here's a look at the compatibility of each browser display ellipsis tutorial. Everyone should know to use the Text-overflow:ellipsis property to implement an overflow display ellipsis (...) for single-line text. Of course, some browsers also need to add width to the wide property.

1 P {2overflow: hidden; 3 white-space: nowrap; 4 text-overflow: ellipsis; 5 }

However, this property does not support multiple lines of text overflow display ellipses.

Two, multi-line text overflow display ellipsis (...)

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 The non-canonical attribute (unsupported WebKit property), which does not appear in the draft CSS specification.

-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 properties. Common binding Properties:

Display:-webkit-box; You must combine the properties to display the object as an elastic telescopic box model.

-webkit-box-orient must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.

Text-overflow:ellipsis, which can be used for multiple lines of text, use the ellipsis "..." to hide out-of-range text.

This property is only suitable for browsers WebKit browsers or mobile (mostly WebKit cores)

P {isplay: -webkit-box; //You must combine the properties to display the object as an elastic telescopic box model. -webkit-box-orient; You must combine properties to set or retrieve the arrangement of child elements of a telescopic box object. Text-overflow: ellipsis;  : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

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:

1 P{2 position:relative;3 Line-height:1.4em;4     /*3 times the line-height to show 3 lines*/5 Height:4.2em;6 Overflow:Hidden;7}8 P::after{9 content:"...";Ten Font-weight:Bold; One position:Absolute; A Bottom:0; -  Right:0; - padding:0 20px 1px 45px; the  -}

CSS implementation single-line, multiline text overflow display ellipsis (...)