标签：文本 省略 height header PingFang right SC font 溢出
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。