CSS 如何实现多行文本展开收起效果

前端瓶子君

共 4178字,需浏览 9分钟

 ·

2021-08-13 16:12

点击上方 三分钟学前端,关注公众号

回复交流,加入前端编程面试算法每日一题群


面试官也在看的前端面试资料

最终实现效果:

本文主要实现难点:

  • 如何实现 展开收起 切换按钮的文字环绕效果
  • 如何实现多行文本溢出省略效果
  • 如何实现 展开收起 的状态or文字切换

初始 html:

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

多行文本溢出省略效果

我们在 CSS 实现文本的单行和多行溢出省略效果 介绍过:

多行文本(css)

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp3;
  -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-clamp999/*设置一个足够大的行数就可以了*/
  }
</style>

但文字展开后控制按钮依然显示 展开 ,应该显示 收起 才对

这里使用伪类生成技术,具体做法就是去除或者隐藏按钮里面的文字,采用伪元素生成

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

最终,大功告成:

最后

欢迎关注「三分钟学前端」,回复「交流」自动加入前端三分钟进阶群,每日一道编程算法面试题(含解答),助力你成为更优秀的前端开发!

号内回复:

网络」,自动获取三分钟学前端网络篇小书(90+页)
JS」,自动获取三分钟学前端 JS 篇小书(120+页)
算法」,自动获取 github 2.9k+ 的前端算法小书
面试」,自动获取 github 23.2k+ 的前端面试小书
简历」,自动获取程序员系列的 120 套模版
》》面试官也在看的前端面试资料《《
“在看和转发”就是最大的


浏览 86
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报