我们也可以参考52CSS.com以前的文章：
CSS对文字溢出时的自动隐藏处理http://www.52css.com/article.asp?id=95
如何设置列表(li)超出部分显示省略号http://www.52css.com/article.asp?id=148
一般的文字截断（适用于内联与块）：
![\"div](\"http://www./Files/BeyondPic/2007-5/24/0752415591157601.gif\")
Example Source Code [www.52css.com].text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/*不换行*/
white-space:nowrap;/*不换行*/
overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
}
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/*不换行*/
white-space:nowrap;/*不换行*/
overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
}
对于表格文字溢出的定义：
Example Source Code [www.52css.com]table{
width:30em;
table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/
}
td{
width:100%;
word-break:keep-all;/*不换行*/
white-space:nowrap;/*不换行*/
overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
}
width:30em;
table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/
}
td{
width:100%;
word-break:keep-all;/*不换行*/
white-space:nowrap;/*不换行*/
overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
}
需要你注意的是，这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。
最新评论