多行文本的展开和收起(纯css)

 

 点击按钮时展开，文本铺满后收起，全程无js代码，不获取dom元素实现这个过程。

毫无疑问需要有一个总体的容器包裹以下元素：text内容，按钮

由于纯css实现，则需要利用input的checkbox + label for来实现点击按钮的操作。

 <div class="content">
        <input type="checkbox"  id="check" class="handle">
        <div class="text">
            <label for="check" class="btn"></label>
        </div>
    </div>

将label的状态与checkbox是否选中的状态绑定，当checked被选中时说明点击了展开按钮，没有checked时说明是收起状态。

注：需将checkbox隐藏：

#check{
display:none
}

先设置content容器的样式：

.content{
    background-color:blue;
    width:500px;
    padding:10px;
    border-radius: 5px;
    box-shadow:5px 1px 5px 1px rgba();
}

设置text文本的样式：

此处用到-webkit-box:弹性伸缩盒子，属性：-webkit-line-clamp:3代表默认只显示三行，overflow：hidden;代表溢出部分隐藏，-webkit-box-orient: vertical代表块级元素中的子元素垂直排列的排列。

 .text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
    }

在文本元素前添加伪元素，实现动态高度的变化，文字环绕的效果。

 .text::before {
        content: '';
        float: right;
        width: 0px;
        height: calc(100% - 16px);
    }

以上，文字部分就差不多设置完啦，现在到按钮部分。

先设置类名为btn的label，将他设置成一个按钮的模样，也就是宽高10+px，文字行高，内外边距，圆角，鼠标悬停时出现小手手，这些都是要考虑的哦。

 .btn {
        border-radius: 5px;
        border: none;
        color: white;
        background-color: #409EFF;
        float: right;
        clear: both;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        padding: 1px 5px;
        cursor: pointer;
    }

按钮的样式设置完了，现在到点击实现”展开“”收起“的步骤了。

1.没有点击时。btn的content为'展开"：

 .btn::after {
        content: '展开'
    }

2.当点击按钮后，即checkbox属性变为已选中的状态，即类名为handle：checked，也就是点击”展开“，此时文本框text的高度 行数 应该变大足以装下剩下的文字。

 .handle:checked+.text {
        /*被点击之后(展开)设置一个足够大的行数*/
        -webkit-line-clamp: 999;
    }

3.同时，btn的content应该变为”收起“

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

以上完成展开 收起的css实现操作。

还记得我最初是把默认显示行数设置成为3的吗？-webkit-line-clamp:3。

可是如果文字只有一行的话，无需展开，那是不是需要把按钮清除掉呢？答案是一定的。

即添加覆盖层，在文字较少时用与背景颜色一样的伪层覆盖掉按钮

此处用到定位，该覆盖层是相对于text内容而言的，存在于text内容里，属于text的子元素，所以是absolute，那么text同时要加上relative相对定位。
   .text::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: blue;
    }

大功告成咯。其实js两句代码就解决的事情。