文本溢出省略展开收起

1.附带样式效果

<view :class="tipsClick?'header-boxopen':'header-box'">
			<view :class="tipsClick?'header-contentopen':'header-content'">
				<view :class="tipsClick?'header-textboxopen':'header-textbox'" @click="onTipsClick()">
					<text :class="tipsClick?'header-btnopen':'header-btn'">{{tipsClick?'收起':'展开'}}
						<uni-icons :type="tipsClick?'top':'bottom'" size="10" color="#0888A6"></uni-icons>
					</text>
					<text :class="tipsClick?'header-textopen':'header-text'">
						为了满足广大学员的要求，提醒学员掌握该课程重难点内容，并提高考试通过率，华夏云课堂推出孤独症康复教育上岗模拟考试功能，以供考生熟悉考试环境，也减少因考试紧张造成的发挥失常！

						模拟考试由一套免费试卷和两套付费试卷组成，分别为不一样的模拟题，供考生自由选择。三套试卷均不haa为了满足广大学员的要求，提醒学员掌握该课程重难点内容，并提高考试通过率，华夏云课堂推出孤独症康复教育上岗模拟考试功能，以供考生熟悉考试环境，也减少因考试紧张造成的发挥失常！</text>
				</view>
			</view>
		</view>

data() {
			return {
				tipsClick: false, //true：展开，false：收起
			}
		},
		
onTipsClick() {
			this.tipsClick = !this.tipsClick
		},

.header-boxopen {
			margin-top: 18rpx;
			width: 750rpx;
			height: 450rpx;
			background: #FFFFFF;
			border-radius: 45rpx 45rpx 40rpx 40rpx;

			.header-contentopen {
				display: flex;

				.header-textboxopen::before {
					content: '';
					float: right;
					height: 100%;
					margin-bottom: 116rpx;
				}

				.header-textboxopen {
					.header-btnopen {
						float: right;
						clear: both;
						margin-right: 14rpx;
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #0888A6;
						line-height: 38rpx;
					}

					.header-textopen {
						display: block;
						padding: 22rpx 36rpx;
						height: 240rpx;
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 38rpx;
					}
				}
			}
		}


		.header-box {
			margin-top: 18rpx;
			width: 750rpx;
			height: 313rpx;
			background: #FFFFFF;
			border-radius: 45rpx 45rpx 0rpx 0rpx;

			.header-content {
				display: flex;

				.header-textbox::before {
					content: '';
					float: right;
					height: 100%;
					margin-bottom: -36rpx;
				}

				.header-textbox {
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 7;
					-webkit-box-orient: vertical;

					.header-btn {
						float: right;
						clear: both;
						margin-right: 14rpx;
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #0888A6;
						line-height: 38rpx;
					}

					.header-text {
						display: block;
						padding: 22rpx 36rpx;
						height: 240rpx;
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 38rpx;
					}
				}
			}
		}

2.基础使用效果
初始 html：

<div class="text">
  <label class="btn">展开</label>
  <span>
    但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
    里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
    长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
    是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
    马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span>
</div>
<style>
  .text {
    width: 475px;
    border: aqua solid 1px;
    color: #333;
    font-size: 14px;
  }
  .btn {
    color: dodgerblue;
    cursor: pointer;
  }
</style>

文字环绕效果：

<div class="content">
 <div class="text">
   <label class="btn" for="exp">展开</label>
   <span>
     但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
     里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
     长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
     是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
     马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span>
 </div>
</div>

<style>
 .content {
   display: flex;
 }
 .text::before{
   content: '';
   float: right;
   height: 100%;
   margin-bottom: -20px;
 }
 .btn {
   float: right;
   clear: both;
   margin-right: 8px;
 }
</style>

多行文本溢出省略效果：

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

展开 和 收起 的状态切换：

<input type="checkbox" id="exp" />
 
<style>
  #exp {
    visibility: hidden;
  }
  #exp:checked+.text{
    -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
  }
</style>

<label class="btn" for="exp"></label>
<style>
  .btn::after{
    content:'展开'
  }
  #exp:checked+.text .btn::after{
    content:'收起'
  }
</style>

3.基础使用教程
原文链接：https://blog.csdn.net/lunahaijiao/article/details/119686578?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1

标签：文本,省略,height,header,PingFang,right,SC,font,溢出
来源： https://blog.csdn.net/ffdals/article/details/122732198