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.
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.
This method is very useful for our website. Because the input box supports the extension area and the two-zone input in the basic area, the extended area text copied from other websites can be normal and realistic, but there is always a problem in length calculation! This method can be used to solve the problem, but it is widely used...
New things are good, but there are problems with compatibility ~