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

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

作者: 乌龟学跑步 | 来源:发表于2021-03-15 09:06 被阅读0次

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

实现方法:
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;
}

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


单行或多单省略效果

随笔记录,不喜勿喷。

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/jxihcltx.html