The content of the CSS control exceeds the container width and the ellipsis is displayed

css| Control | show

Generally we see such as news list, in order to make the text does not return to the line, control the number of words, through the program so that superfluous characters show ellipsis, we only use CSS can achieve the same effect, although not perfect.

Li {
width:50px;
White-space:nowrap;
Text-overflow:ellipsis;
Overflow:hidden;
}

First is a container, can be div,li,td, and so on, first define the width, "white-space:nowrap" is forced to display all the text in a row, not back. "Text-overflow:ellipsis" is the key.

Text-overflow is the CSS3 new attribute, supported by IE6 above version. It can take 2 parameters: Clip [does not show ellipsis (...). , but a simple trim],ellipsis[display an ellipsis (...) when text overflows inside an object. ）]。 So, this method does not support Firefox. Therefore, we also need to add a overflow:hidden, so that the extra text in FF hidden.

Although hit the effect, but because the effect is also very convenient with program control, and there is no browser compatibility problem, so the method of using the CSS to appear chicken.