CSS实现多⾏⽂本展开收起效果极简教程
最终实现效果：
本⽂主要实现难点：
如何实现 展开 和 收起 切换按钮的⽂字环绕效果
如何实现多⾏⽂本溢出省略效果
如何实现 展开 和 收起 的状态切换
初始 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>
控制按钮⽂字环绕效果
⼀般展开、收起按钮都在⽂字的右下脚：
局右： float: right
局下：margin-top
但 margin 虽然可以将按钮局下，但它⽆法实现⽂字环绕效果，所以我们这⾥利⽤伪元素实现：局右： float: right
局下：.text::before
局右
.text::before{
content: '';
float: right;
}
局下
.text::before{
content: '';
float: right;
width: 0;
height: calc(100% - 20px);
}
我们发现出现了⾼度塌陷（ calc(100% - 20px) ⽆效）的问题：
由于包含块的⾼度没有显式指定，并且该元素不是绝对定位，则计算值伪 auto，auto * 100/100 = NaN
— CSS 世界
此时解决办法有：
设置显式的⾼度值：这⾥⾼度是动态的，没办法显式指定，所以此⽅法不可⽤
如果包含块的⾼度显式指定，则设置该元素为绝对定位：包含块的⾼度是动态的，没办法显式指定，所以此⽅法也不可⽤
在元素外边包⼀层具有包裹性⼜具有定位特性的标签：
这⾥包⼀层 flex 布局。因为在 flex 布局的⼦项中，可以通过百分⽐来计算变化⾼度，因此，这⾥需要给 .text 包裹⼀层，然后设置 display: flex
<div class="content">
<div class="text">
<label class="btn" for="exp">展开</label>
<span>
但听得蹄声如雷，⼗余乘马疾风般卷上⼭来。马上乘客⼀⾊都是⽞⾊薄毡⼤氅，
⾥⾯⽞⾊布⾐，但见⼈似虎，马如龙，⼈既矫捷，马亦雄骏，每⼀匹马都是⾼头
长腿，通体⿊⽑，奔到近处，雄眼前⼀亮，⾦光闪闪，却见每匹马的蹄铁竟然
是黄⾦打就。来者⼀共是⼀⼗九骑，⼈数虽不甚多，⽓势之壮，却似有如千军万
马⼀般，前⾯⼀⼗⼋骑奔到近处，拉马向两旁⼀分，最后⼀骑从中驰出</span>
</div>
</div>
<style>
.content {
display: flex;
}
.text::before{
content: '';
css特效文字
float: right;
height: 100%;
margin-bottom: -20px;
}
.btn {
float: right;
clear: both;
margin-right: 8px;
}
</style>
多⾏⽂本溢出省略效果
我们在 介绍过：
多⾏⽂本（css）
.text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
-webkit-line-clamp: 3（⽤来限制在⼀个块元素显⽰的⽂本的⾏数, 2 表⽰最多显⽰ 2 ⾏。 为了实现该效果，它需要组合其他的WebKit 属性）
display: -webkit-box（和 1 结合使⽤，将对象作为弹性伸缩盒⼦模型显⽰ ）
-webkit-box-orient: vertical（和 1 结合使⽤ ，设置或检索伸缩盒对象的⼦元素的排列⽅式 ）
overflow: hidden（⽂本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis（多⾏⽂本的情况下，⽤省略号“…”隐藏溢出范围的⽂本)
如何实现展开和收起的状态切换
使⽤ input type="checkbox" 控制展开与收起效果
<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>
最终，⼤功告成：
最后

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。