css多行溢出省略

在以前文本超出元素设定的宽度后，自动换行，我们为了实现只显示一行内容，会有以下两种方法

第一种，通过设定高度隐藏多余内容（不推荐）

div{
    height:30px;
    overflow:hidden;
}

第二种，通过文本隐藏的操作，使之隐藏的文本用省略号来显示，这种方案不适合多行

div{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap; //该属性控制文本只在一行显示，不换行
}

现有一种方案能使多行也用省略号来展示（在webkit内核下的浏览器可实现效果,如chorme等）

div{
    width:100px;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;//显示几行
}