微信小程序的超出部分显示省略号和展开按钮（css方式实现）_微信小程序添加省略号

一.使用场景

最近在仿写——起点中文网的微信小程序，在书籍简介中存在一个需求
简介文本超出规定的范围出现省略号以及展开按钮
网上其他做法都是js控制，但是一般开发中，能不写js就不写js，下面我将通过css方式实现此效果
1
2
3

二.方法

思路：
1

1. 出现省略号，需要用到text-overflow: ellipsis;display: -webkit-box;等
2. 上述样式实现省略号后，剩下最后一个，展开按钮需要出现在省略号后面
3. 如果是在标签后面添加“展开按钮”,此方式行不通，无论怎样添加，省略号都会将后面的内容进行覆盖
4. 方式：将展开按钮通过绝对定位的方式强制加在超出文本的后面，此时就需要在此展开按钮前后添加伪类选择器 ::after,::before,手动实现省略号和展开按钮，然后将通过样式实现的省略号进行覆盖，以此实现——…展开——的效果

代码：
wxml：

 <view class="topIntroduct">
            <view class="text {{introductFlag ?'foldIntroduct':''}} ">
                {{bookDetailData.bookIntroduct}}//文本内容
                //下面的是展开按钮那一部分，其中的文本内容是需要动态的设置::after/::before设置
                <view class="fold" bindtap="fold" data-text="{{foldText}}" data-etc="{{textEtc}}"></view>
            </view>
        </view>
1
2
3
4
5
6
7

css:

/**小说简介 */
.topIntroduct{
    width:100%;
}
.topIntroduct .text{   //文本的view实现父级的相对定位，并实现省略号
    width:90%;
    margin:10rpx auto;
    line-height:60rpx;
    color:#64676e;
    position: relative;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   //设置超出几行省略内容
    text-overflow:ellipsis;
    overflow: hidden;
}
.fold::before{       //设置在文本下面的展开按钮那一部分，此部分的前面设置——...省略号，并通过绝对定位设置在超出部分的后面
    content:attr(data-etc);
    position: absolute;
    left:0;
    bottom:-10rpx;
    transform: translateX(4rpx);

}
.fold::after{  //设置文本下面的展开按钮的那一部分，此部分的后面设置——展开  展开按钮，并通过绝对定位设置在省略号的后面
    content:attr(data-text);
    position:absolute;
    bottom:-10rpx;
    right:0;
    color:#409eff;
}

.fold{  //展开按钮的那一部分，同样设置绝对定位，并设置宽高，将通过样式实现的省略号遮住，同时将::before和::after展开的内容设置在里面
    width:105rpx;
    height:35rpx;
    position: absolute;
    right:0;
    bottom:0;
    background-color:#fff;
}
.foldIntroduct{   //出现此样式名时，设置不出现省略号和展开按钮
  -webkit-line-clamp:inherit!important;
}
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

展现步骤
1.第一步骤

2.第二步骤

设置完成后，将会出现效果

三.实现超出几行限制出现省略号和展开按钮，不超过不出现省略号和展开按钮（判断省略第几行出现省略号的问题在第四点）

——同时出现另一个需求，点击简介后，如果没有超出三行（自定义的超出部分）,将不会出现省略号和展开效果。

1. ——所以样式中的::after/::before中的content是动态内容，需要手动控制
2. ——需要用到css中的attr（）函数，attr返回所选元素中的属性值，我们可以通过html5的特性data-xxx实现自定义属性，将内容赋值给属性

<view class="fold" bindtap="fold" data-text="{{foldText}}" data-etc="{{textEtc}}"></view>
.fold::before{   
    content:attr(data-etc);
    position: absolute;
    left:0;
    bottom:-10rpx;
    transform: translateX(4rpx);
}
.fold::after{ 
    content:attr(data-text);
    position:absolute;
    bottom:-10rpx;
    right:0;
    color:#409eff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

js代码：

data{
 	introductFlag:false,//设置点击时，是否出现全文还是出现省略号和展开按钮
 	foldText:'展开',  //控制简介中展开和收起的出现与否
    textEtc:"...", //控制简介中省略号的出现与否
    },
      //简介的展开
  async fold(e){
    await this.setData({
      introductFlag:!this.data.introductFlag,
    })
    this.setData({
      foldText:this.data.introductFlag==true? '收起':'展开',
      textEtc:this.data.introductFlag==true? ' ':'...'
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四.完整代码
wxml：

 <view class="topIntroduct">
            <view class="text {{introductFlag ?'foldIntroduct':''}} ">
                {{bookDetailData.bookIntroduct}}//文本内容
                //下面的是展开按钮那一部分，其中的文本内容是需要动态的设置::after/::before设置
                <view class="fold" bindtap="fold" data-text="{{foldText}}" data-etc="{{textEtc}}"></view>
            </view>
        </view>
1
2
3
4
5
6
7

css:

/**小说简介 */
.topIntroduct{
    width:100%;
}
.topIntroduct .text{   //文本的view实现父级的相对定位，并实现省略号
    width:90%;
    margin:10rpx auto;
    line-height:60rpx;
    color:#64676e;
    position: relative;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   //设置超出几行省略内容
    text-overflow:ellipsis;
    overflow: hidden;
}
.fold::before{       //设置在文本下面的展开按钮那一部分，此部分的前面设置——...省略号，并通过绝对定位设置在超出部分的后面
    content:attr(data-etc);
    position: absolute;
    left:0;
    bottom:-10rpx;
    transform: translateX(4rpx);

}
.fold::after{  //设置文本下面的展开按钮的那一部分，此部分的后面设置——展开  展开按钮，并通过绝对定位设置在省略号的后面
    content:attr(data-text);
    position:absolute;
    bottom:-10rpx;
    right:0;
    color:#409eff;
}

.fold{  //展开按钮的那一部分，同样设置绝对定位，并设置宽高，将通过样式实现的省略号遮住，同时将::before和::after展开的内容设置在里面
    width:105rpx;
    height:35rpx;
    position: absolute;
    right:0;
    bottom:0;
    background-color:#fff;
}
.foldIntroduct{   //出现此样式名时，设置不出现省略号和展开按钮
  -webkit-line-clamp:inherit!important;
}
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

js代码：

data{
 	introductFlag:false,//设置点击时，是否出现全文还是出现省略号和展开按钮
 	foldText:'展开',  //控制简介中展开和收起的出现与否
    textEtc:"...", //控制简介中省略号的出现与否
    },
      //简介的展开
  async fold(e){
    await this.setData({
      introductFlag:!this.data.introductFlag,
    })
    this.setData({
      foldText:this.data.introductFlag==true? '收起':'展开',
      textEtc:this.data.introductFlag==true? ' ':'...'
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

四.判断当前内容是第几行的问题

（时隔一年多，昨天又碰到了类似的需求，最后在一篇回答中得到了启发，line-height）
上文中会出现一个问题，那怎样判断内容到底是几行，如果超过三行出现省略号，不超过不出现省略号同时不出现“展开”字样
——不出现省略号可以通过样式( -webkit-line-clamp: 3;)去控制,那“展开”的功能该怎样去判断
思路：
1.css中存在一个属性line-height，这是内容的每一行的行高，如果设置了line-height,如果存在三行，那是否意味着该内容的高度为3*line-height

观察我批注的地方，我设置了line-height:20px;左侧的高度是为60px的，但因为截图有限，无法展示，但可通过window.getComputedStyle(ele,null)来获取该元素的所有的样式，然后进行计算，得出该内容的行数

let height=window.getComputedStyle(ele,null).height//可以获取该元素的实际高度
let row=height/(line-height的高度)//此时得到的就是行数
let heightVal=height.substring(0,height.length-2) //去掉px
console.log(height,heightVal/20)
 if(heightVal/20>=3){  //line-height=20px; 超过三行
   console.log('rrrr超过三行',)
 }else{
   console.log('ttt不超过三行')
 }
1
2
3
4
5
6
7
8
9

完结：
——此时已经可以得出了该内容的行数，那之后的事情，就是通过行数来判断“展开”字样是否显示了