关闭

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

标签: 多行溢出前端
138人阅读 评论(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>


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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36175次
    • 积分:677
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:7篇
    • 译文:0篇
    • 评论:6条
    文章分类
    最新评论
    自定义

    理念:

    弹钢琴的码农