评论

小程序设置多行文本超出隐藏

小程序设置多行超出进行隐藏

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; /*设置超出两行进行隐藏*/

}


最后一次编辑于  09-24  
点赞 1
收藏
评论

2 个评论

  • Terry
    Terry
    10-09

    text,设置了 user-select=true后,下述样式失效了,请问该怎么办?

    display: -webkit-box;

    word-break: break-all;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;

    overflow: hidden;

    text-overflow: ellipsis;


    10-09
    赞同
    回复
  • 谋谋谋
    谋谋谋
    09-24

    已阅

    09-24
    赞同
    回复
登录 后发表内容