二、“…”显示超出文本

如何在一个块内显示文本的行数,超出行数显示“……”?


 

下面的css代码是用户显示最多2行,如果超过2行则用……

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

 

如何在一行内显示超出文本显示“……”


 

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

}

注意:多行显示“……”和一行显示“……”的属性都是组合属性,必须一起使用才能起作用。且需要给容器定义宽度

posted @ 2017-08-04 14:05  gunelark  阅读(171)  评论(0编辑  收藏  举报