CSS text out-of-section display ellipsis (original)

Single line out of ellipsis

#word1 {width:100px; text-overflow:ellipsis; overflow:hidden;}

A few lines beyond the ellipsis (compatible with the WebKit kernel only)

3; Overflow:hidden;}

Compatible wording (but when the text is not long enough when the ellipsis will still exist, you need to determine the JS)

#wordNV2 {width:100px; position:relative; overflow:hidden; word-break break-all; height:60px; line-  ' ... ' 0 0 (%);}

The first thing you need to add is the knowledge about line breaks (add the following line-wrapping CSS as the case requires)

First, forced line break
1 Word-break:break-all; Only works in English, with letters as the basis for line-wrapping.

2 Word-wrap:break-word; Only works in English, with words as the basis for line change.

3 white-space:pre-wrap; Only works on Chinese, forcing line wrapping.

The following conditions

This is the CSS part line ellipsis

#word1 {width:100px; height:20px; line-height:20px; text-overflow:ellipsis; overflow:hidden;}

Here is the display:

Why is this, because there is a space after a, the line is automatically wrapped, so the ellipsis is not displayed.

Here are the multi-line scenarios

So we need to set a new line of things.

Reprint Please specify source :http://www.cnblogs.com/matthew9298-Begin20160224/

CSS text out-of-section display ellipsis (original)