如何判断多行文本溢出达成的条件 - WXOPEN Club

需求：

未知字数的一段文本，最多显示4行；

超过四行，则文本溢出，显示展开按钮，展开后显示收起按钮

1.字数较少，不显示展开按钮

2.超过四行，文本溢出，显示展开

3.超出四行，展开后显示收起

多行文本溢出代码：

overflow: hidden;

-webkit-box-orient: vertical;

display: -webkit-box;

-webkit-line-clamp: 4;

text-overflow: ellipsis;

问题：文本内容达到溢出的条件怎么判断，现在是用文本的字数，比如105个字，超过105个字显示按钮，但显然不合理，求指导，谢谢

10 回复

ghao1 楼6 年前

这么整肯定不行，我们项目里用了展开收起文字功能，没发现谁的手机有问题

xgong2 楼6 年前

小程序页面字体大小/行高不好直接设置px，设计图750，那样会显得和其他页面格格不入，尤其是在小屏手机上，所以怎么计算好像都不靠谱，暂时项目需求直接去除了这个按钮

目前想到的只能将就试着用的方法：

估计四行能显示的字符长度，（但是汉字、数字、字母等所占宽度不完全一致），超出这个字数显示按钮，将这个字符数作为判断条件；
如果页面要求不高，可以考虑将文本字体、行高等用px写死，那样四行所占的高度是确定的，将这个高度作为判断条件；

如果有心思，可以尝试将方法2进行屏幕适配

感谢给出回答的各位，后续如果有什么好的建议，希望不吝赐教

lingang3 楼6 年前

行高不是跟容器大小一样的么比如容器大小为200rpx 那么行高为50 那就只能显示4行啊获取当前容器只要超过200rpx就说明超高了不过可能要转换一下 rpx 到 px

taohuang4 楼6 年前

<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>