html中文字溢出处理（text-overflow）
文字溢出处理有两种方式：
一、css
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
二、js方法
控制字符个数，超出部分这不显示
以下为示例demo.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>text test</title> 6 <style> 7 .wrapper{ 8 display:flex; 9 flex-direction: row; 10 justify-content: space-between; 11 width: 1000px; 12 height:300px; 13 margin:100px auto; 14 } 15 .wrapper p{ 16 width: 300px; 17 height:auto; 18 padding:20px; 19 border:1px solid #ddd; 20 box-sizing: border-box; 21 } 22 .wrapper p:nth-child(1){ 23 overflow:hidden; 24 white-space: nowrap; 25 text-overflow: ellipsis; 26 } 27 .wrapper p:nth-child(2){ 28 overflow:hidden; 29 text-overflow: ellipsis; 30 display:-webkit-box; 31 -webkit-box-orient: vertical; 32 -webkit-line-clamp:2; /* 限制在一个块元素显示的文本的行数。*/ 33 } 34 </style> 35 </head> 36 <body> 37 <div class="wrapper"> 38 <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p> 39 <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p> 40 <p id="textover">青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p> 41 </div> 42 43 <script type="text/javascript" src="jquery-1.11.0.min.js"></script> 44 <script type="text/javascript"> 45 $(document).ready(function(){ 46 var textLgth = 20; 47 var textCur = $("#textover").text().length; 48 if(textCur > textLgth){ 49 $("#textover").text($("#textover").text().substring(0,textLgth)); 50 $("#textover").html($("#textover").html()+'...') 51 } 52 }); 53 54 </script> 55 </body> 56 </html>
最后页面展示
