微信小程序的超出部分显示省略号和展开按钮(css方式实现)
一.使用场景最近在仿写——起点中文网的微信小程序,在书籍简介中存在一个需求简介文本超出规定的范围出现省略号以及展开按钮网上其他做法都是js控制,但是一般开发中,能不写js就不写js,下面我将通过css方式实现此效果二.方法思路:出现省略号,需要用到text-overflow: ellipsis;display: -webkit-box;等上述样式实现省略号后,剩下最后一个,展开按钮需要出现在省略号
一.使用场景
最近在仿写——起点中文网的微信小程序,在书籍简介中存在一个需求
简介文本超出规定的范围出现省略号以及展开按钮
网上其他做法都是js控制,但是一般开发中,能不写js就不写js,下面我将通过css方式实现此效果
二.方法
思路:
- 出现省略号,需要用到text-overflow: ellipsis;display: -webkit-box;等
- 上述样式实现省略号后,剩下最后一个,展开按钮需要出现在省略号后面
- 如果是在标签后面添加“展开按钮”,此方式行不通,无论怎样添加,省略号都会将后面的内容进行覆盖
- 方式:将展开按钮通过绝对定位的方式强制加在超出文本的后面,此时就需要在此展开按钮前后添加伪类选择器 ::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>
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.第二步骤
设置完成后,将会出现效果
三.实现超出几行限制出现省略号和展开按钮,不超过不出现省略号和展开按钮(判断省略第几行出现省略号的问题在第四点)
——同时出现另一个需求,点击简介后,如果没有超出三行(自定义的超出部分),将不会出现省略号和展开效果。
- ——所以样式中的::after/::before中的content是动态内容,需要手动控制
- ——需要用到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;
}
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? ' ':'...'
})
},
四.完整代码
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>
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;
}
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? ' ':'...'
})
},
四.判断当前内容是第几行的问题
(时隔一年多,昨天又碰到了类似的需求,最后在一篇回答中得到了启发,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不超过三行')
}
完结:
——此时已经可以得出了该内容的行数,那之后的事情,就是通过行数来判断“展开”字样是否显示了
更多推荐
所有评论(0)