文字溢出处理有两种方式：

一、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>

最后页面展示

html5溢出隐藏代码 html溢出处理_html5溢出隐藏代码