The ellipsis is displayed when the content controlled by CSS exceeds the container width.

We usually see a news list, for example, in order to keep the text blank and control the number of words, we will use the program to display the ellipsis for extra characters. We can only use CSS to achieve the same effect, although not perfect.

The code is as follows:	Copy code
Li { Width: 50px; White-space: nowrap; Text-overflow: ellipsis; Overflow: hidden;      }

First, it is a container, which can be div, li, td, etc. First, define the width. "white-space: nowrap" is to force all text to be displayed in a row without returning rows. "Text-overflow: ellipsis" is the key.
Text-overflow is a new attribute of CSS3, which is supported by IE6 or later versions. It can contain two parameters: clip [not displaying the omitted mark (...), but a simple crop]. ellipsis [displays the omitted mark (...) when the text in the object overflows]. Therefore, this method does not support Firefox. Therefore, we need to add overflow: hidden to hide unnecessary words in ff.
Although the results are achieved, it is very convenient to use the program to control this effect, and there is no browser compatibility problem, so the method of CSS control is quite bad.