美文网首页
小程序随笔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