html中文字溢出处理（text-overflow）

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

一、css

overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;

二、js方法

控制字符个数，超出部分这不显示

以下为示例demo.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>text test</title>

     <style>

         .wrapper{

             display:flex;

             flex-direction: row;

             justify-content: space-between;

             width: 1000px;

             height:300px;

             margin:100px auto;

         }

         .wrapper p{

             width: 300px;

             height:auto;

             padding:20px;

             border:1px solid #ddd;

             box-sizing: border-box;

         }

         .wrapper p:nth-child(1){

             overflow:hidden;

             white-space: nowrap;

             text-overflow: ellipsis;

         }

         .wrapper p:nth-child(2){

             overflow:hidden;

             text-overflow: ellipsis;

             display:-webkit-box;

             -webkit-box-orient: vertical;

             -webkit-line-clamp:2;  /* 限制在一个块元素显示的文本的行数。*/

         }

     </style>

 </head>

 <body>

 <div class="wrapper">

     <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

     <p>青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

     <p id="textover">青春易逝，容颜易老，即使是平常光鲜亮丽的明星也会有容颜老去的一天，但明星们可不愿意承认自己已经老了事实，即使是已经奔三奔四的年龄了，还总爱扮嫩。今天我们就来看看年过半百还扮嫩的几位女星。</p>

 </div>

 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

         var textLgth = 20;

         var textCur = $("#textover").text().length;

         if(textCur > textLgth){

             $("#textover").text($("#textover").text().substring(0,textLgth));

             $("#textover").html($("#textover").html()+'...')

         }

     });

 </script>

 </body>

 </html>

最后页面展示

html中文字溢出处理（text-overflow）-LMLPHP