纯css控制文字显示隐藏

纯css控制文字显示隐藏

用到css 伪类 :checked
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
html

<div class="box">
    <input type="radio" name="clickInput" value="0" id="Input1" hidden>
    <label class="label1" for="Input1">更多</label>
    <input type="radio" name="clickInput" value="1" id="Input2" hidden>
    <label class="label2" for="Input2">收起</label>
   <div class="text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>

css

 .box{
            position: relative;
            margin:auto;
            width: 180px;
            overflow: hidden;
            padding-bottom: 20px;
        }
       .text{
           height: 40px;
           color: #555555;
           word-break:break-word ;
           word-wrap: break-word;
           line-height: 20px;
           overflow: hidden;
       }
        .label1{
            position: absolute;
            bottom: 0;
            left: 0px;
            height: 20px;
            line-height: 20px;
            color: rgb(96,115,232);
            cursor: pointer;
        }/*用于调整单选框的属性以及位置*/
        .label2{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            color: rgb(96,115,232);
            cursor: pointer;
            display: none;
        }/*用于调整单选框的属性以及位置*/

        #Input1:checked~div{height: auto}/*展开高度*/
        #Input1:checked~.label1{
            display: none;}/*隐藏更多*/
        #Input1:checked~.label2{
            display: block;}/*显示收起*/
        #Input2:checked~div{
            height: 40px;}/*还原高度*/
        #Input2:checked~.label2{
            display: none;}/*隐藏收起*/

效果 更多和收起按钮切换

就酱了~~