HTML uses CSS to let the text out of the section with the ellipsis three points display method case

HTML uses CSS to make the text out of the section with an ellipsis of three points to display the method:

I use the following code correctly, Li inside is a mark. Use in IE and Google is normal, Firefox does not know, I do not care, waiting for you to test

li{

Display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;

}

Just take this CSS style to use it, programming, solve just fine, do not look at the following.

Grammar:

Text-overflow:clip | Ellipsis

Parameters:

Clip: Do not show ellipsis (...), but simple trim

(Clip This parameter is not used!)

Ellipsis: Display ellipsis (...) when text inside an object overflows

Description

Sets or retrieves whether an ellipsis tag (...) is used. Indicates an overflow of text within an object.

Please note that the Text-overflow:ellipsis property is not effective in FF.

Example:

div {text-overflow:clip;}

Text-overflow is a very special style, we can use it instead of the title intercept function we usually use, and this is more friendly to search engines, such as: the title file has 50 characters, and our list may be only 300px width. If the title intercepts the function, then the title is not complete, if we use CSS style text-overflow:ellipsis, the output title is complete, but only by the size of the container is not displayed.

The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.

Example:

Pre-modification effects:

Modify the effect later:

HTML uses CSS to let the text out of the section with the ellipsis three points display method case