第一种:只要求显示一行的情况,
直接用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()+'···'); } });