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

本文转载自微信公众号「三分钟学前端」，作者sisterAn 。转载本文请联系三分钟学前端公众号。

目前创新互联建站已为成百上千的企业提供了网站建设、域名、雅安服务器托管、网站托管、企业网站设计、奈曼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

最终实现效果：

本文主要实现难点：

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

初始 html：

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

    • 控制按钮文字环绕效果

    一般展开、收起按钮都在文字的右下脚：

    但 margin 虽然可以将按钮局下，但它无法实现文字环绕效果，所以我们这里利用伪元素实现：

    局右

     
 
 
 
      
  
  
  
  
    1. .text::before{ 
      2.   
  
  
  
    2.     content: ''; 
      3.   
  
  
  
    3.     float: right; 
      4.   
  
  
  
    4. } 
      5.

    局下

     
 
 
 
      
  
  
  
  
    1. .text::before{ 
      2.   
  
  
  
    2.     content: ''; 
      3.   
  
  
  
    3.     float: right; 
      4.   
  
  
  
    4.     width: 0; 
      5.   
  
  
  
    5.     height: calc(100% - 20px); 
      6.   
  
  
  
    6. } 
      7.

    我们发现出现了高度塌陷( calc(100% - 20px) 无效)的问题：

    由于包含块的高度没有显式指定，并且该元素不是绝对定位，则计算值伪 auto，auto * 100/100 = NaN

    — CSS 世界

    此时解决办法有：

    这里包一层 flex 布局。因为在 flex 布局的子项中，可以通过百分比来计算变化高度，因此，这里需要给 .text 包裹一层，然后设置 display: flex

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

    多行文本溢出省略效果

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

    多行文本(css)

     
 
 
 
      
  
  
  
  
    1. .text { 
      2.   
  
  
  
    2.   display: -webkit-box; 
      3.   
  
  
  
    3.   overflow: hidden; 
      4.   
  
  
  
    4.   -webkit-line-clamp: 3; 
      5.   
  
  
  
    5.   -webkit-box-orient: vertical; 
      6.   
  
  
  
    6. } 
      7.

    如何实现 展开 和 收起 的状态切换

    使用 input type="checkbox" 控制展开与收起效果

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.

    最终，大功告成：

    当前名称：CSS如何实现多行文本展开收起效果
    URL链接：http://www.mswzjz.cn/qtweb/news42/293842.html

    温江区贝锐智能技术服务部_成都网站建设公司，为您提供网站制作、网站设计、微信小程序、云服务器、营销型网站建设、App设计

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    网站建设知识

    各行业网站

    巴中倍辉科技　　 　工程造价　　 　绵阳服务器托管　　 　成都广告公司　　 　四川成都托管服务器　　 　APP定制　　 　宜宾网站建设　　 　企业网站设计　　 　香港虚拟主机　　 　资阳网站建设　　 　成都康明斯发电机　　 　蓬溪网站建设　　 　画册设计制作　　 　重庆服务器托管　　 　南充服务器托管　　 　联通服务器托管　　 　胜锦安防科技　　 　四川网站建设　　 　成都微商城开发　　 　成都app制作