小程序随笔8:文本单行或多行显示省略...

小程序中经常会用到文本单行或多行显示省略...

实现方法：
1、在小程序页面对应的.wxml文件，添加如下布局代码。

<!--index.wxml-->
<view class="singlines">春节即中国农历新年，俗称新春或新岁或岁旦，是我们最重要的节日。</view>
<view class="multilines">春节即中国农历新年，俗称新春或新岁或岁旦，是我们最重要的节日，春节历史悠久，由上古时代岁首祈岁祭祀演变而来。</view>

2、在小程序页面对应的.wxss文件，添加如下布局代码。

/**index.wxss**/
.singlines {
  width: 100%;
  color: #81d13f;
  font-size: 36rpx;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space:nowrap;
}

.multilines {
  padding-top: 20px;
  width: 100%;
  color: #5968f0;
  font-size: 36rpx;
  overflow: hidden; 
  text-overflow: ellipsis; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

内容比较简单，效果图如下：

单行或多单省略效果

随笔记录，不喜勿喷。