问题:在做移动端项目的时候,数据渲染的时候经常会遇到因为文字太长而超出的问题,原来的解决方式是对文字进行截取拼接"...",现在有更方便的方式
1.单行文字超出省略
<!--单行文本超出部分加省略号-->
.a{
width: 300px;
word-break: break-all; /*允许在单词内换行*/
text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/
overflow: hidden;
white-space: nowrap;/*不换行 控制单行文本*/
}
2.多行文字超出省略
.b{
width: 300px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*控制文字行数*/
height: 50px; /*控制div的高度*/
}