单行、多行文本溢出 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .oneLine{
 8                 width: 50%;
 9                 white-space: nowrap;
10                 text-overflow: ellipsis;
11                 overflow: hidden;
12                 height: 100px;
13             }
14             
15             .moreLine{
16                 width: 200px;
17                 word-break: break-all;
18                 line-height: 30px;
19                 /*height: 120px;*/
20                 
21                 overflow: hidden;
22                 text-overflow: ellipsis;
23                 
24                 
25                 display: -webkit-box;
26                 -webkit-box-orient: vertical;
27                 -webkit-line-clamp: 2;
28                 
29             }
30             
31             
32         </style>
33         
34         
35     </head>
36     <body>
37         
38         <p class="moreLine">发送到发送到发送到发达是否就立刻就看见到发送到发送到发达是否就立刻就看见到发送到发送到发达是否就立刻就看见到发送到发送到发达是否就立刻就看见爱上了</p>
39         
40     </body>
41 </html>

 兼容ie

 1 //多行文本省略
 2 var text = $(".site-detail-content") //文本容器
 3 console.log(text.innerHeight())
 4 text.each(function(){
 5     var maxwidth=93;//限制的字符数
 6     if($(this).text().length>maxwidth){
 7         $(this).text($(this).text().substring(0,maxwidth));
 8         $(this).html($(this).html()+'...');
 9     }
10 });

 

posted @ 2017-09-15 14:39  铜镜123  阅读(111)  评论(0)  编辑  收藏  举报