css实现文字“一行/两行”显示，超出部分省略号显示

1.文字一行显示：

div {
    width: 150px; 
    overflow: hidden;
    text-overflow: ellipsis;   /* 文字超出部分省略号显示 */
    white-space: nowrap;   /* 不换行 */
}

image.gif

2.文字两行显示：

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

image.gif

此处用到 webkit 的私有属性：-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

常用结合属性：

• display: -webkit-box; （必须结合属性）用来将对象作为弹性伸缩盒子模型显示
• -webkit-box-orient （必须结合属性）用来设置或检索伸缩盒对象的子元素的排序方式
• text-overflow （非必须）该属性可以用来多行文本的情况下，用省略号隐藏超出范围的文本