如何判断多行文本溢出达成的条件
需求：
未知字数的一段文本，最多显示4行；
超过四行，则文本溢出，显示展开按钮，展开后显示收起按钮
1.字数较少，不显示展开按钮
2.超过四行，文本溢出，显示展开
3.超出四行，展开后显示收起
多行文本溢出代码：
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4;
text-overflow: ellipsis;
问题：文本内容达到溢出的条件怎么判断，现在是用文本的字数，比如105个字，超过105个字显示按钮，但显然不合理，求指导，谢谢
10 回复
小程序页面 字体大小/行高不好直接设置px，设计图750，那样会显得和其他页面格格不入，尤其是在小屏手机上，所以怎么计算好像都不靠谱，暂时项目需求直接去除了这个按钮
目前想到的只能将就试着用的方法：
估计四行能显示的字符长度，（但是汉字、数字、字母等所占宽度不完全一致），超出这个字数显示按钮，将这个字符数作为判断条件；
如果页面要求不高，可以考虑将文本字体、行高等用px写死，那样四行所占的高度是确定的，将这个高度作为判断条件；
如果 有心思，可以尝试将方法2进行屏幕适配
感谢给出回答的各位，后续如果有什么好的建议，希望不吝赐教
<template>
<!-- margin-bottom 是为了显示 展开文章后 的 收齐 -->
<view class="common-article-wrap" :style="{'maxHeight':`${!isVisible ? 38*(maxShowLine + 1)+'rpx' : 'auto'}`,'overflow':`${!isVisible ? 'hidden' : 'visible'}`,'marginBottom':`${!isVisible ? '0rpx' : '38rpx'}`}">
<view class="common-article-body">
<text v-text="text"></text>
</view>
<view class="common-show-more-wrap">
<!-- 高度和文章的高度一致 -->
<view class="placeholder-text-height"></view>
<!-- 隐藏 高度是 h * lineheight 展开 是 文章高度 -->
<view class="placeholder-text-line-height" :style="{'height':`${!isVisible ? 38*(maxShowLine)+'rpx' : '100%'}`}"></view>
<!-- background 是隐藏文章 显示的 h + 1行 -->
<view class="common-show-more" :style="{'backgroundColor':backgroundColor}" @tap="toggleVisible">
<text v-text="visibleText"></text>
</view>
</view>
</view>
</template>
<script>
//
export default{
name:"CommonShowMore",
data(){
return {
isVisible:false, // 是否显示隐藏
maxShowLine:2, // 最大显示多少行
}
},
computed:{
visibleText(){
return !this.isVisible ? '查看原文' : '收起'
}
},
methods:{
toggleVisible(){
this.isVisible = !this.isVisible;
}
},
props:{
// 显示的纯文本内容，不兼容z-index 比较高的内容
text:{
type:String,
default:''
},
backgroundColor:{
type:String,
default:"#FFFFFF"
}
}
}
</script>
<style lang="scss">
$lineHeight:38rpx;
.common-article-wrap{
overflow: hidden;
font-size: 30rpx;
line-height: $lineHeight;
font-weight: 400;
color:#3C3C3C;
position: relative;
.common-article-body{
&>text{
word-break: break-all;
white-space: pre-wrap;
hyphens: auto;
}
}
.common-show-more-wrap{
position:absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
.placeholder-text-height{
float:right;
height: 100%;
width:1rpx;
//width:1%;
}
.placeholder-text-line-height{
float:right;
width:calc(100% - 1rpx);
//width:99%;
}
.common-show-more{
float:left;
width:calc(100% - 1rpx);
//width:99%;
height:$lineHeight;
line-height:$lineHeight;
z-index:2;
color: #5B7DFE;
}
&:after{
clear:both;
content:'';
}
}
}
</style>
【使用 uni-app 做的，使用 css 的解决方案】【参考链接 https://www.cnblogs.com/wetest/p/7365676.html】
强力驱动