CSS 应用多行文本展开/折叠/溢出效果

• 如何实现 Expand 和 Colapse 切换多行效果按钮以实现流动文本省略效果
• 如何实现从 Expand 和 Colapse

创建状态或文本更改 早期 HTML 效果： ‼HTML 按钮控制

一般展开和折叠按钮位于右下脚text:

• 浮动: right
• bottom: margin-top

但是margin，按钮可以放在下面。由于无法实现包裹效果，所以这里使用伪元素来实现：

• right: float: right
• bottom: .text::before❀♷​​♷ 我们发现了折叠高度的问题（无效的calc(100% - 20px)）：

  因为包含块的高度没有明确定义，并且元素定位不正确。该值是伪自动的，自动 * 100/100 = NaN

  — CSS World

  此时的解决方案是：

  • 设置一个显式的高度值：这里的高度是动态的，没有办法显式定义它，所以这个方法不可用 ❌
  • 如果显式指定包含块的高度，则元素设置为绝对位置：包含块的高度是动态的，无法显式确定，所以这个方法在元素上不可用 ❌
  • 包裹层包装器并将标签放置在外部： ✅

  在此处插入灵活布局层。因为在弹性布局的children中，变化的高度可以用百分比来计算，所以，这里需要将图层.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;
     height: 100%;
     margin-bottom: -20px;
   }
   .btn {
     float: right;
     clear: both;
     margin-right: 8px;
   }
  style>
  

  

  Multi-省略效果行文本溢出

  我们在 CSS 中引入了单行和多行溢出省略效果：

  多行文本（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 一起使用，设置或检索一个灵活的盒子模型视图的子元素数组）盒子对象）
  • （文本超过限制宽度时隐藏内容）
  • text-overflow：省略号（多行文本时，使用省略号“...”隐藏超出范围的文本）
  

  如何理解状态变化展开和折叠

  .text::before{
      content: '';
      float: right;
  }
  

  

  使用

  .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>
    

    

    但是按钮文字后的控件展开仍然显示Expand，应该显示Colapse此处使用了伪类。具体方法是去掉或者隐藏按钮中的文字，用伪元素生成

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

    最后就完成了：