代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
重点代码：text-overflow: ellipsis;
解释：简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> css 超出部分显示省略号</title> </head> <body> <div id="div1" style=" 100px; background: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">省略号啊省略号啊省略号啊</div> 重点样式是 text-overflow: ellipsis; <br /> text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。 </body> </html>
附： white-space: nowrap; http://www.w3cschool.cn/pr_text_white-space.html
text-overflow: ellipsis; http://www.w3chtml.com/css3/properties/text/text-overflow.html