純css控制文字顯示隱藏

用到css 偽類 :checked
:checked 選擇器匹配每個(gè)已被選中的 input 元素（只用于單選按鈕和復(fù)選框）。
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;
        }/*用于調(diào)整單選框的屬性以及位置*/
        .label2{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            color: rgb(96,115,232);
            cursor: pointer;
            display: none;
        }/*用于調(diào)整單選框的屬性以及位置*/

        #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;}/*隱藏收起*/

效果 更多和收起按鈕切換

就醬了~~