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>
行内元素要显示省略号，需要先转化成块状元素或行内块元素。
时间： 2024-11-09 07:53:00