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

效果


组件

vue 复制代码
<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>
相关推荐
耶啵奶膘2 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
3Katrina3 小时前
我仿造了一个掘金App的首页...
前端·css
The_era_achievs_hero6 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域9 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
伍哥的传说16 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序
结城1 天前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..1 天前
网络安全第三次作业
前端·css·html
小白阿龙1 天前
如何实现缓存音频功能(App端详解)
前端·css·html5