内容太多显示不下可以用css来控制,超出的部分显示省略号
//内容如下
<view class="wrapStyle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eius incidunt, itaque odit ratione reiciendis tempora voluptas. Ad, saepe tempora. Accusantium alias blanditiis cupiditate deserunt est facilis laudantium nisi quo.
</view>
1、常见的css样式如下
.wrapStyle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
![](https://img.haomeiwen.com/i11280057/bbd10b433c8dcdc1.png)
这种只能显示一行,但是有时候又有这样的需求,要求超出两行隐藏显示省略号,或者三行
四行等。
2、超出指定行数再显示省略号并隐藏、样式如下
.wrapStyle {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 这里是超出几行省略 */
overflow: hidden;
}
![](https://img.haomeiwen.com/i11280057/86f23cc64a2c8bb1.png)
![](https://img.haomeiwen.com/i11280057/db633dfa21919172.png)
![](https://img.haomeiwen.com/i11280057/4b7e087f65044321.png)
网友评论