当前位置: 代码迷 >> 综合 >> 多行溢出显示省略号(...)
  详细解决方案

多行溢出显示省略号(...)

热度:85   发布时间:2024-01-20 12:33:30.0

单行溢出显示省略号

多行溢出显示省略号


这里也顺便写一下单行溢出。作为简单复习吧

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100px;

多行溢出。如果是移动端的话。可以这样写


display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

如果不考虑兼容问题,这样在pc端写还是可以的。但是不考虑兼容那只是我们作为前端的一个白日梦而已

那么如果考虑兼容要怎么写呢。恩恩,不好写。那就用js写吧。

<script type="text/javascript">
$(".act-com").each(function(){
var maxwidth=104;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});
</script>


这样来通过限制字数来起到显示省略号的作用,这样做就稍稍麻烦点点的是字数是固定的。但是这样就可以不用考虑兼容问题。这个方法算是比较靠谱的写法了

  相关解决方案