其他分享
首页 > 其他分享> > 文本溢出省略展开收起

文本溢出省略展开收起

作者:互联网

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