CSS basics: text-overflow: Detailed Method for displaying ellipsis in ellipsis overflow text _ CSS tutorial

Syntax:
Text-overflow: clip | ellipsis

Parameters:
Clip: do not show the omitted mark (...), but simply crop
(Clip is not commonly used !)
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)

Note:
Sets or retrieves whether an omission mark (...) is used to indicate text overflow in the object.
Note that the text-overflow: ellipsis attribute has no effect in FF.

Example:
Div {text-overflow: clip ;}

Text-overflow is an extraordinary style. We can use it instead of the title truncation function we usually use, and it is more friendly to search engines, such as: the title file has 50 Chinese characters, our list may only have a width of PX. If the function is intercepted by the title, the title is incomplete. If we use the CSS style text-overflow: ellipsis, the output title is complete, it is not displayed due to the limitation of the container size.

The following describes how to apply text-overflow attributes:

The text-overflow attribute is only an annotation, and whether the omitted mark is displayed when the text overflows. Does not have other style attribute definitions. We want to achieve the effect of ellipsis during overflow. It must also be defined to force the text to be displayed (white-space: nowrap) in a row and overflow: hidden ). Only in this way can the overflow text display effect be achieved.

On our homepage, an unordered list UL is created, which contains several list items LI and the List link A is established internally. Our tests are mainly carried out in LI. Please pay attention to the following three sections of code:

1. Defining only text-overflow: ellipsis; The ellipsis effect cannot be achieved.

li {width:300px; line-height:25px; text-overflow:ellipsis;}

2. Define text-overflow: ellipsis; white-space: nowrap; similarly, it cannot achieve ellipsis.

li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}

3. Simultaneous application: text-overflow: ellipsis; white-space: nowrap; overflow: hidden; achieves the ellipsis effect of the overflow text to be obtained:

li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

　 Note that the text-overflow: ellipsis attribute has no effect in FF.

The latest test on November 21 was compatible with Firefox browsers (my Firefox version is 26.0). Now, basically all browsers are compatible with mobile browsers. I have tested it and it is also compatible with internal browsers.