text-overflow:ellipsis;要達到的效果是：文字超出容器寬度時，文字被隱藏的文字用省略號代替。所以該屬性只能用於塊狀元素或行內塊元素中，對行內元素是不起作用的。
一般和white-space:noworp;(強制文字不換行)，overflow:hidden;(文字溢出隱藏)，一起使用。
eg1:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>text-overflow</title> 6 </head> 7 <style type="text/css"> 8 body,div{margin: 0;padding: 0;} 9 .text{ 10 width: 200px; 11 overflow: hidden; 12 border: 1px solid #c66; 13 white-space: nowrap; 14 text-overflow:ellipsis; 15 } 16 </style> 17 <body> 18 <div class="text">輕舞飛揚輕舞飛揚輕舞飛揚輕舞飛揚輕舞飛揚</div> 19 </body> 20 </html>
eg2:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>text-overflow</title> 6 </head> 7 <style type="text/css"> 8 body,span{margin: 0;padding: 0;} 9 .text{ 10 border: 1px solid #c66; 11 padding:5px 10px; 12 display: inline-block; 13 max-width: 200px; 14 overflow: hidden; 15 white-space: nowrap; 16 text-overflow:ellipsis; 17 } 18 </style> 19 <body> 20 <span class="text">輕舞飛揚輕舞飛揚輕舞飛揚輕舞飛揚輕舞飛揚</span> 21 </body> 22 </html>
行內元素要顯示省略號，需要先轉化成塊狀元素或行內塊元素。