超出文本宽度点点显示——css

1.超出一行点点显示

.ellipsis-1{
    white-space: nowrap;            //不换行
    overflow: hidden;              //超出宽度隐藏
    text-overflow: ellipsis;        //超出宽度点点显示
}

2.超出两行点点显示

.ellipsis-2{
    overflow: hidden;                 //超出宽度隐藏
    text-overflow: ellipsis;           //超出宽度点点显示
    display: -webkit-box;             //将对象作为弹性伸缩盒子模型显示
    -webkit-line-clamp: 2;            //限制在一个块元素显示的文本的行数
    -webkit-box-orient: vertical;    //设置或检索伸缩盒对象的子元素的排列方式
}

3.超出三行点点显示

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

 

posted @ 2020-11-04 09:09  琼菇凉  阅读(819)  评论(0编辑  收藏  举报