超出文本宽度点点显示——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;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM