文字溢出處理有兩種方式：
一、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>
最后頁面展示
