css设置内容超出范围用省略号表示

标签内容为:明天就周末了

设置后的效果图如下:

实现代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>css设置内容超出范围用省略号表示</title>
 5     <style type="text/css">
 6         p{
 7             width: 50px;
 8             height: 20px;
 9             /*把超出的内容进行隐藏*/
10             overflow: hidden;
11             /*设置内容不换行*/
12             white-space: nowrap;
13             /*设置超出内容为省略号*/
14             text-overflow: ellipsis;
15         }
16     </style>
17 </head>
18 <body>
19     <p>明天就周末了</p>
20 </body>
21 </html>

注意代码行:9-14行

posted @ 2018-04-13 17:45  呀,西蓝花  阅读(326)  评论(0编辑  收藏  举报