文本换行和超出一行显示

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

• white-space: nowrap;
• overflow: hidden;

text-overflow属性可以控制一行文字超过框以后超过的部分的显示形式。

The text-overflow Property

The following two divs contains a text that will not fit in the box.

text-overflow: clip (default):
Hello world!

text-overflow: ellipsis:
Hello world!

text-overflow: "----" (user defined string):
Hello world!

Note: The text-overflow: "string" only works in 
Firefox.

效果如下:

 而且

• white-space: nowrap;
• overflow: hidden;

而且除了text-overflow以外，这两个属性也必须同时写上。

更多内容，请参考:CSS text-overflow Property