uniapp view容器自动换行&&溢出隐藏

view容器文本过长不做任何css修饰情况下

uniapp view容器自动换行&&溢出隐藏_第1张图片

view容器自动换行

word-wrap: break-word;
word-break: break-all;
white-space: pre-line;

效果:
uniapp view容器自动换行&&溢出隐藏_第2张图片
显示全部文字,不是我想要的效果。

设置固定行数,溢出部分用省略号代替

// 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
display: -webkit-box;
// 设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-box-orient:vertical;
// 用省略号“…”隐藏超出范围的文本 。
text-overflow: ellipsis;
overflow: hidden;
//用来限制在一个块元素显示的文本的行数。
-webkit-line-clamp: 3;
line-height: 50upx;

效果:
uniapp view容器自动换行&&溢出隐藏_第3张图片
这里可以不设置宽高,没有影响。

你可能感兴趣的:(uniapp,css,css3)