多行文本溢出显示省略号

多行文本溢出显示省略号：

html:

<div>
    <p>
        多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略
        多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略
        多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略
        多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略
        多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略多行文本溢出显示省略
    </p>
</div>

less:

//多行文本溢出显示省略号
.line-over-ellipsis (@line) { //@line 表示可显示行数
    -webkit-line-clamp: @line;
    overflow: hidden;
    display: -webkit-box;         //必须结合属性
    -webkit-box-orient: vertical; //必须结合属性
    text-overflow: ellipsis;
}
p {
    //width: 100%;           //宽度为可选值
    .line-over-ellipsis (2); //显示两行，多余文字按省略号显示
}

单行文本溢出显示省略号：

html: 

同上。。。

css:

p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}