代碼： 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="width: 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