uniapp 小程序 vue 第二行省略号 后面加更多思路和方式

<template>
	<view>
			<view >
			{{ subs }}
		</view>
		<view class="ddex">
			<view class="first" :style="{width:statusBarHeight/2+'px'}"  >
				{{ subStr }}
			</view>
			<view>更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '这是一段很长的文本，需要进行省略显示。需要进行省略显示需要进行省略显示需要进行省略显示需要进行省略显示需要进行省略显示需要进行省略显示需要进行省略显示',
				statusBarHeight: 0,
				subs: "",
				subStr: ""
			};
		},
		onLoad() {
			let str = this.text
			let sts = this.text
			this.subs = sts.substr(0, 22);
			console.log(1, this.subs)
			this.subStr = str.slice(23);
			console.log(2, this.subStr)
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarHeight = e.windowWidth;
					console.log(e, '-')
				}
			})

		}
	}
</script>

<style>
	.first {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.ddex {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
</style>