CSS extra text hidden

Sometimes the width of the container is fixed, but to display a bit more text, you need to hide the extra text, and in order to indicate that there are no words displayed, with an ellipsis.

Similar to this:

Use the following CSS style to achieve:

{    overflow: hidden;     text-overflow: ellipsis;}

Three attributes can be used together to achieve the above effect.

Overflow, the default value is visible, if you do not set the hidden, it will display all the content, to find out the scope of the container.

Text-overflow: There are three values, clip (trim text), ellipsis (using ellipses instead of trimmed text), and string (instead of trimmed text using the specified string).

Using the above style is supported in addition to IE6.

This is true in the IETester IE6:

Not only did the text not be hidden, but also the width was big (I've set the width to 300px).

Online some say add white-space:nowrap; But it's useless.

Now think of the method is to use JS, set the length of the text and then intercept, redundant use of ellipsis instead.

CSS extra text hidden