前言

文章讲解如何实现纯css实现文本的展开收起，使按钮保持在文本右下角

正文

一、按钮位置固定

1.让按钮右浮动

首先让按钮浮动起来，注意按钮和文本的顺序，是按钮在前，现在已经让按钮浮动到右边

<div class="text">
     <botton>展开</botton>
     AI时下有一种需asasd sa dsa d sad sad sad sad sad sd sad sa dsa d sad sd 求是AI助adsd sad sa dsa ds ad asd as dsasad sa dsa d asd assa d sad sa ds ads a力硬件产品的现象，有用AI机器视觉能力检测工件质量的，有用AI机器视觉检…
</div>

<style>
    botton{
        float:right;
    }
</style>

接下来是想办法让按钮在文本的下边，这样就可以实现按钮持续在右下角

2.让按钮保持文本底部

有什么方法可以让按钮往下走？
可能你会想到margin，确实可以往下走，但是你会发现文本不会环绕在按钮周围，所以这个方法行不通
如果多个浮动元素会怎么样? 这里用伪元素代替元素

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先随便设置一个高度*/
  background: red
}

按钮没有下来？给按钮清楚浮动

.btn {
  float: right;
  clear: both;
  /*其他装饰样式*/
}

这样按钮就会在这个伪元素的下面，所以这个伪元素的高度需要换种方式，不能直接写死，然后把他的宽度改为0就可以了。

    .text::before{
        content: '';
        float: right;
        height: 100%;
        margin-bottom: -18px;
    }

3.解决高度失效问题

这里使用margin-bottom，发现没有效果，因为height：100%，没有生效，可以打开控制台看看，高度是0，原因是父亲没有固定高度，而且你不能给固定高度，因为文本的内容是不确定的，所以这时候我们使用flex

<div class="content">
      <div class="text">
          <button></button>
          AI时下有一种需asasd sa dsa d sad sad sad sad sad sd sad sa dsa d sad sd 求是AI助adsd sad sa dsa ds ad asd as dsasad sa dsa d asd assa d sad sa ds ads a力硬件产品的现象，有用AI机器视觉能力检测工件质量的，有用AI机器视觉检…
      </div>
</div>

先给html添加一层盒子.content，给外层盒子添加flex

.content{
    display: flex;
}

这时候按钮就成功保持在文本的右下角了，然后一些高度或者margin，根据自己的项目微调就可以了。

二、文本隐藏

1.文本实现多行隐藏

.text{
        display:-webkit-box;
        -webkit-box-orient:vertical;
        word-break:break-all;
        -webkit-line-clamp:2; //选择显示几行
        overflow:hidden;	
        text-overflow: ellipsis;
}

给text盒子添加上面属性就可以实现多行隐藏

三、实现点击展开收起

这个可以使用js来实现，这里来讲使用css怎么实现

1.修改HTML结构

<div class="content">
     <input type="checkbox"  id="exp">
     <div class="text">
         <label for="exp"></label> //原来的button
         AI时下有一种需asasd sa dsa d sad sad sad sad sad sd sad sa dsa d sad sd 求是AI助adsd sad sa dsa ds ad asd as dsasad sa dsa d asd assa d sad sa ds ads a力硬件产品的现象，有用AI机器视觉能力检测工件质量的，有用AI机器视觉检…
     </div>
</div>

在text外面加一个input， checkbox选择框
把button改为label，并且使用for和input的id绑定这时候点击按钮，就会触发input，

2.使用伪元素生成按钮中的名称（展开/收起）

将html中label中的展开删除

label::after{
  content:'展开' /*采用content生成*/
}

添加 :checked 状态

#exp:checked+.text .btn::after{
  content:'收起'
}

兼容版本由于前面的省略号是模拟出来的，不能自动隐藏，所以需要额外来处理

#exp:checked+.text .btn::before {
    visibility: hidden; /*在展开状态下隐藏省略号*/
}

将三个css添加之后，就可以实现点击效果了，不过自己起的类名或者id要对应。然后将input设为隐藏即可

四、完整代码

<div class="content">
     <input type="checkbox" id="exp">
     <div class="text">
         <label for="exp"></label>
         AI时下有一种需asasd sa dsa d sad sad sad sad sad sd sad sa dsa d sad sd 求是AI助adsd sad sa dsa ds ad asd asdsasad sa dsa d asd assa d sad sa ds ads a力硬件产品的现象，有用AI机器视觉能力检测工件质量的，有用AI机器视觉检…
      </div>
</div>

<style>
    .content {
        display: flex;
    }

    .text {
        margin: 20px;
        border: 1px solid pink;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-break: break-all;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    label {
        float: right;
        display: block;
        width: fn-pxtorem(60);
        height: fn-pxtorem(36);
        line-height: fn-pxtorem(36);
        margin-right: fn-pxtorem(4);
        text-align: center;
        background: rgba(34, 34, 34, 0.40);
        border-radius: fn-pxtorem(4);
        font-size: fn-pxtorem(20);
        color: #000;
        clear: both;
    }

    label::after {
        content: '展开'
    }

    .text::before {
        content: '';
        float: right;
        height: 100%;
        margin-bottom: -16px;
    }

    #exp:checked+.text {
        -webkit-line-clamp: 999;
    }

    #exp:checked+.text label::after {
        content: '收起'
    }
    input{
        display: none;
    }
</style>

小功能 -- 文本展开收起

前言

正文