限制显示的字数，并用省略号代替省略掉的子

第一种：只要求显示一行的情况，

   直接用css解决：  overflow: hidden;white-space: nowrap;text-overflow:ellipsis;




第二种：要求显示多行

  这种情况用单纯的css是无法实现的，所以我们需要借助js实现；

<div id="demo">

      有时在控制台中查看一个复杂对象是一件很麻烦的事，因为他们可能有很多的键值或者一些很难手动解析的值。幸运的是，Chrome可以让检查这类JavaScript对象变得很容易。 你只需在控制台中右键点击对象后选择“存储为全局变量”，chrome就会将这个变量存储为一个名叫“temp1”的变量，之后你可以通过Javascript对其进行操作。
</div>

< script >

var demoBOx=document.getElementById('demo');

var demoHtml = demoBOx.innerHTML.slice(0,20)+'...';

demoBOx.innerHTML = demoHtml;

</ script >




vue.js实现

3.第三种：多个文章都需要的

$(".serHallDatil p").each(function(){            var maxwidth=120;            if($(this).text().length>maxwidth){            $(this).text($(this).text().substring(0,maxwidth));            $(this).html($(this).html()+'···');            }        });