微信小程序wxml实现长文本折叠

微信小程序通过wxss实现长文本折叠，并显示省略号。

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 长文本自动折叠wxss */
.row-content-hidden {
  font-size: 15px;
  margin-top: 5rpx;
  margin-bottom: 5rpx;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  /* white-space: nowrap; //强制不换行 */
  /* 过长文本折叠 */
  display: -webkit-box;
  word-break: break-all;
  /* 文字隐藏后添加省略号 */
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  /* 文本最大高度为10行 */
  -webkit-line-clamp: 10;
}

/* 长文本不折叠wxss */
.row-content-display {
  font-size: 15px;
  margin-top: 5rpx;
  margin-bottom: 5rpx;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

wxml

1
2
3
4
5
<!-- 长文本超过10行自动折叠，尾部添加省略号 -->
<text class="row-content-hidden">{{item.works.body}}</text>

<!-- 长文本不折叠全部显示 -->
<text class="row-content-display">{{item.works.body}}</text>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

徘徊在原子与字节的边缘<br><br>将更好的自己呈现给世界<br><br><br><br>修心至要，事上磨练<br><br>一蓑衣，一壶酒，一曲长歌，一剑天涯<br><br>见自己，见天地，见众生<br><br>