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

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

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


春节即中国农历新年,俗称新春或新岁或岁旦,是我们最重要的节日。
春节即中国农历新年,俗称新春或新岁或岁旦,是我们最重要的节日,春节历史悠久,由上古时代岁首祈岁祭祀演变而来。

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;
}

内容比较简单,效果图如下:


单行或多单省略效果

随笔记录,不喜勿喷。

你可能感兴趣的:(小程序随笔8:文本单行或多行显示省略...)