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>
行内元素要显示省略号，需要先转化成块状元素或行内块元素。