前端文本多行省略展开收起

1.在文字较多且布局较小需要简洁页面

2.html在template中的内容（内容具体）

3.css样式

		background: rgba(255, 255, 255, 0.6) !important;
		&__body {
			background: rgba(255, 255, 255, 0.6) !important;
		}
	}
	.u-card-wrap {
		background-color: #996c3d;
		padding: 0rpx;
		.headitem {
			display: flex;
			padding: 0rpx;
			.item {
				flex-direction: column;
			}
		}
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 0rpx 10rpx;
	}

	.u-body-item image {
		width: 180rpx;
		flex: 0 0 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-left: 12rpx;
		background-color: #ccc;
	}
}
.likemsg {
	display: flex;
	position: absolute;
	top: 8rpx;
	left: 20rpx;
	.like {
		// width: 53rpx;
		// height: 53rpx;
		// border: 2rpx solid #996c3d;
		// padding: 10rpx;
		// border-radius: 40rpx;
		// color: #996c3d;
		// font-size: 30rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-left: 400rpx;
	}
}
.containerTitle {
	width: 100%;
	font-size: 24rpx;
	display: inline-block;
	color: #1d1d1d;
	position: relative;
}
.evaluateItem {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 20rpx;
	margin: 20rpx 30rpx 0 30rpx;
	// display: flex;
}
.evaluateText {
	margin: 20rpx 0 0 0;
	letter-spacing: 1rpx;
	line-height: 40rpx;
}
.lineclamp3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	// width: 500rpx;
}
.rightText {
	color: #4399fc;
	text-align: right;
}

5.js内容 a.每行的文字数量

b.点击展开、收缩动态显示