text-overflow:ellipsis实现超出隐藏时省略号显示

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>

行内元素要显示省略号，需要先转化成块状元素或行内块元素。

 

posted @ 2015-05-07 15:22  MissBean  阅读(4371)  评论(0)  编辑  收藏  举报