css超出两行显示省略号

1. css写法只对webkit内核的浏览器好用, 对safari浏览器有兼容问题

.demo {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

2. css超出两行显示省略号(个人写法)

<template>
    <div class="twoLines">
        <div class="article" ref="article" >
            <p class="content" ref="p">{{content}}</p>
            <span class="cover" v-if="isShow">...</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            content: "测试账号测试zhangha测试账号测试zhangha测试账号测试zhangha测试账号测试zhangha测试账号测试zhangha测试账号测试zhangha",
            // content: "quweyrioquakdjfhalks,zcn,zxmczxclsadfhjaskdlfkjsdhfewqiuorirqirqwehadfjkashdfjkasdlfhjkasdhlkjashfkhaszmxcnmzxncfsafsafhasd;flaskjfa;k",
            isShow: false,
        }
    },

    mounted(){
        this.adjust();
    },

    methods: {
        adjust(){
            var obj_p = this.$refs.p.getBoundingClientRect()
            var obj_article = this.$refs.article.getBoundingClientRect();
            if(obj_p.height>obj_article.height){
                this.isShow = true;
            }
        },

        // 获取元素的长、宽、高等属性
        getBoundingClientRect(el){
            var xy = el.getBoundingClientRect();
            var top = xy.top - document.documentElement.clientTop + document.documentElement.scrollTop,
            bottom = xy.bottom,
            left = xy.left - document.documentElement.clientLeft + document.documentElement.scrollLeft,
            right = xy.right,
            width = xy.width || right - left, //IE67不存在width 使用right - left获得
            height = xy.height || bottom - top;

            return {
                top: top,
                right: right,
                bottom: bottom,
                left: left,
                width: width,
                height: height
            };
        }
    }
}
</script>

<style lang="scss" scoped>
// 用了淘宝的 flexible.min.js rem布局
@function rem($px){
    @return ($px/100)*1rem;
}

.twoLines {
    padding: 0 rem(20);
    .article {
        max-height: rem(100);
        overflow: hidden;
        position: relative;
        .content {
            width: 100%;
            line-height: rem(50);
            text-align: justify;
            font-size: rem(32);
            word-break: break-all;
        }

        // 省略号样式需要根据自己的具体字体大小进行调整
        .cover {
            width: rem(32);
            height: rem(50);
            background-color: #fff;
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: rem(28);
            padding-top: rem(9);
            box-shadow: 1px 1px 3px #fff;
        }
    }
}
</style>

ps: 在这里只是个人的写法而已.