多行文本溢出省略

方案1 

利用浮动文本环绕的特点 在文本未超出时可以使用指定义指令隐藏省略号

<template>
    <div lass="notes-box">
        <p class="ellipsis">...</p>
        <div  class="notes">
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        </div>
    </div>
</template>

<style lang="scss">
.notes-box {
    height: 64px;
    overflow: hidden;
    &:before {
	    content: '';
	    display: block;
	    height: 36px;
    }
    .notes {
        margin-top: -36px;
    }
    .ellipsis {
	    float: right;
	    margin-right: 15px;
	}
}
</style>

方案2

<template>
    <div class="notes">
        啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦           
    </div>
</template>
<style>
.notes{
    height: 64px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* 设置最多显示2行 */
    -webkit-box-orient: vertical;
｝
</style>