【兼容IE】多行省略...

最新推荐文章于 2022-11-14 16:41:47 发布

陪着月亮

最新推荐文章于 2022-11-14 16:41:47 发布

阅读量1k

点赞数

分类专栏： # 项目记录文章标签：兼容IE

本文链接：https://blog.csdn.net/xilejie/article/details/103141557

版权

项目记录专栏收录该内容

19 篇文章 0 订阅

订阅专栏

方法1：
直接使用css样式，但是IE不兼容。

 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;

方法2：

mounted:
$("p").each(function(i, obj) {
            var lineHeight = parseInt($(this).css("line-height"));
            var height = parseInt($(this).height());
            if (height / lineHeight > 2) {
                $(this).addClass("p-after");
                $(this).css("height", "70px");
            } else {
                $(this).removeClass("p-after");
            }
        });

css:

p {
         position: relative;
         line-height: 35px;
         overflow: hidden;
   }
  .p-after:after {
         content: "...";
         position: absolute;
         bottom: 0;
         right: 0;
         padding-left: 40px;
   }