MENU

小程序开发单行多行文本溢出省略号显示

January 17, 2020 • css

单行:

.text {
overflow: hidden;/*超出隐藏*/
white-space: nowrap;/*文本不会换行*/
text-overflow: ellipsis; /*省略符号来代表被修剪的文本。*/
}

多行:

.text {
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式:从上向下垂直排列子元素。*/
-webkit-line-clamp:3;/*几行,这里是3行*/
overflow: hidden;
text-overflow:ellipsis;
}
转载请注明出处,并添加原文地址

Archives QR Code Tip
QR Code for this page
Tipping QR Code