Multiple lines of text overflow display ellipsis (...) text-overflow:ellipsis

Detailed Text-overflow

Grammar:

text-overflow: Clip | Ellipsis

default value :clip

applies to : block-level container elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Clip: When inline content is removed from the block container, the overflow is trimmed off.

Ellipsis: When inline content removes a block container, replace the overflow part with the (... ）。

Note: To make the Text-overflow property effective, the block container must explicitly define overflow as a non-visible value, while explicitly or implicitly defining width as a non-auto valuewhite-space is the nowrap value.

For example:

HTML code:

        <class= "text-overflow-ellipsis"> nice             sunny day Good scenery butterfly Busy bee also busy small birds busy white clouds        also busy </div>

CSS code:

        {            margin-top: 20px;             width: 300px;             text-overflow: ellipsis;             Overflow: hidden;             white-space: nowrap;        }

Through the above CSS, the common line beyond the text width of the content with the ellipsis is realized, do not know that we found no, Xiao Ying in the set Text-overflow:ellipsis, after also set up Overflow:hidden; White-space:nowrap; When the Text-overflow property is set, the overflow and white properties are set at the same time, and the text-overflow takes effect.

however White-space:nowrap; Means no line break, which means only one line is displayed.

But sometimes we want to implement multiple lines, and at the end of the last line use "..." to indicate. The following Xiao Ying to share how to use Text-overflow:ellipsis to implement multiple lines of text overflow in the last line to display the ellipsis (...)

Take a look at it first:

HTML code:

        <class= "text-overflow-ellipsis"> The weather is fine and             sunny everywhere good scenery good scenery butterfly busy The bees are busy, too, the little birds        are busy. </div>

CSS code:

        {            margin-top: 20px;             height: 55px;             width: 100px;             text-overflow: ellipsis;             Overflow: hidden;             display: -webkit-box;             -webkit-line-clamp: 3;             -webkit-box-orient: vertical;        }

If you set the-webkit-line-clamp to 2, then

If you need to make the text display only two lines and the second line followed by an ellipsis, you need to set-webkit-line-clamp to 2 while the height is set to 35px;

Note: This is a not very common attribute-webkit-line-clamp

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

-webkit-line-clampThe number of lines used to limit the text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.

Common binding Properties:

1. display: -webkit-box;You must combine the properties to display the object as an elastic telescopic box model.
2. -webkit-box-orientYou must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.
3. text-overflow: ellipsis;, you can use the ellipsis "..." to hide out-of-range text in the case of multiple lines of text.

Specific examples can be viewed http://www.css88.com/webkit/-webkit-line-clamp/

Today Xiao Ying work because of the late, do not want to wash their hair, go out on a wig, haha haha, there is no want to see it?

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Drop down

Pull down again.

No, hahaha.

Xiao Ying is not a bomb to scare everyone haha, tease everyone, hehe

Multiple lines of text overflow display ellipsis (...) text-overflow:ellipsis