小程序设置多行文本超出隐藏
发布于 4 年前 作者 mwen 2246 次浏览 来自 分享

1、最近开发遇到需要在列表页显示一部分相关信息,但是可能涉及的信息比较长,所以想让它只显示两行,超出即用…显示,ok,实现效果和代码如下。

2、页面

3、页面代码(展示部分代码,主要看隐藏)

<view class="weui-cell order-info">

<view class="order_content"  bindtap="toRepairinfo" data-id="{{maintenance.id}}">

<view class='tag'> {{maintenance.equipmentName}}</view>

<view class="total total_time">报修时间 :{{maintenance.applyRepairDate}}</view>

<view class="remarks">

<span class="bzm"> 故障描述:</span> <span>{{maintenance.errorDescription}}</span> 

            </view>

    </view>

</view>

4、wxss

.order_content .remarks{

padding:1% 5% 1% 5%;

  /*设置多行超出进行隐藏*/

  display: -webkit-box;

  word-break: break-all;

  text-overflow: ellipsis;

  overflow: hidden;

  -webkit-box-orient: vertical;

  -webkit-line-clamp:2; /*设置超出两行进行隐藏*/

}


1 回复
回到顶部