teaching-uniapp/components/detailBlock/detailBlock.vue

<template>
	<view class="detailBlock">
		<view class="tit">教研室详情</view>
		<view class="cont">
			会议时间：<text>10月7日上午八点(周日)</text>
		</view>
		<view class="cont">
			活动形式：<text style="color: #0056a8;">线上直播</text>
		</view>
		<view class="cont">
			   <view id="myElement" class="activeTit">
					教研室概况：查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多查看更多查看更多查看更多看更多查看更多查看更多查看更多查看更多
			   </view>
				<text class="zdwz" style="color: #0056a8;float: right;" @click="zdwz">收起</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"detailBlock",
		data() {
			return {
				
			};
		},
		methods:{
			zdwz(){
				const query = wx.createSelectorQuery();
				    query.select('#myElement').fields({ computedStyle: ['lineClamp'] }).exec((res) => {
				      const element = res[0];
				      element.style.webkitLineClamp = '4'; // 修改行数限制为 2
				    });
			}
		}
	}
</script>

<style lang="scss">
	.detailBlock{
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 15px 10px;
		.tit{
			font-weight: bold;
			margin-bottom: 10px;
		}
		.cont{
			color: #999999;
			margin-bottom: 10px;
			.content {
			  // .zdwz{
				 //  position: absolute;
				 //  right: 0;
				 //  bottom: 0;
			  // }
			}
		
			.activeTit{
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;/*设置 需要显示的行数*/
			}
				
		}
	}
</style>