uniapp 小程序 CSS 实现多行文本展开收起 组件

效果

组件

<template>
	<!-- 最外层弹性盒子 -->
	<div class="box" :style="boxStyle">
		<!-- 文本区域，动态类名控制展开/收起状态 -->
		<div ref="textRef" :class="['text-cont', btnFlag ? 'text-unfold' : 'text-collapse']">
			<!-- 展开/收起按钮 -->
			<div class="unfold-and-collapse" @click="btnFlagChange">
				{{ btnFlag ? '收起' : '展开' }}
			</div>
			<!-- 文本内容（保留首行缩进） -->
			&emsp;&emsp;{{ text }}
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ExpandableText',
		props: {
			text: {
				type: String,
				default: ''
			},
			boxStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 展开收起状态
				btnFlag: false
			}
		},
		methods: {
			// 切换展开/收起状态 
			btnFlagChange() {
				this.btnFlag = !this.btnFlag
			}
		}
	}
</script>

<style scoped>
	/* 最外层开启弹性盒子，用于伪元素的高度计算 */
	.box {
		display: flex;
	}

	/* 文本区域设置宽度，显示省略号 */
	.text-cont {
		width: 100%;
		margin: 0px auto 0;
		display: -webkit-box;
		/* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-box-orient: vertical;
		/* 溢出部分隐藏 */
		overflow: hidden;
		/* 文字居左 */
		text-align: left;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		line-height: 44rpx;
		font-style: normal;
	}

	/* 展开状态 - 显示所有行 */
	.text-unfold {
		-webkit-line-clamp: 9999;
	}

	/* 收起状态 - 只显示3行 */
	.text-collapse {
		-webkit-line-clamp: 3;
	}

	/* 展开/收起按钮样式 */
	.unfold-and-collapse {
		color: #19aaff;
		float: right;
		clear: both;
		margin-right: 10px;
		cursor: pointer;
		font-size: 26rpx;
		line-height: 44rpx;
		margin-top: -6rpx;
	}

	/* 伪元素用于实现文字包裹按钮 */
	.text-cont::before {
		content: "";
		float: right;
		width: 0;
		height: calc(100% - 20px);
	}
</style>