单行、多行字数过多显示省略号样式
注意:一定要按照以下结构。可以用于web或者微信小程序
一、单行
html: <div>文字</div>
css :div{
display: block;
overflow: hidden;//溢出隐藏
width: 406px;//长度必须设置
white-space: nowrap;//不换行
text-overflow: ellipsis;//省略号
}
二、多行
html:<div>
<span>文字</span>
</div>
css : div{
width: 406px;
max-height: 78px;//设置最大高度
display: block;
}
div span{
width: 406rpx;//设置长度
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//省略号
display: -webkit-box;
-webkit-line-clamp: 3;//行数
-webkit-box-orient: vertical;
}