gogoWebsite

"See more" function, more perfectly realized

Demand:

Hide the text when there is too much text, replace it with an ellipsis followed by a "see more" button.
Click "View More" to expand all the text, as shown below:

Click "Put away" to restore the original state.
realization

<div class="box clearfix">
        <div class="rt more"> 
            <span>...</span>
            <a>View More</a>
        </div>
        <div class="text">Test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi</div>
        <div class="rt retract">
            <a>put away</a>
        </div>
    </div>

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
        .box{
            box-sizing: border-box;
            padding-top: 75px;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .text{
            margin-top: -75px;
            font-size: 12px;
            line-height: 25px;
            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;
        }
        .rt{
            float: right;
            font-size: 12px;
            line-height: 25px;
        }
        .rt a{
            color:red;
            cursor: pointer;
        }
        .ha{
            height: auto;
        }

$(".rt a").click(function(){
    if($('.more').css("display")!=='none'){
        $(".box").addClass('ha')
        $('.more').hide() 
    }else{
        $(".box").removeClass('ha')
        $('.more').show() 
    }
});

analyze
1. The "View More" button actually relies on floats to achieve a text wrap effect. (Setting a float in front of the text can achieve the effect of text surround. When we set the "View More" button to float right, the effect is as follows:)

And the ellipsis instead of omitting the document actually relies on the text-wrap effect to simulate it.
2. "View More" button relies on float positioning, can only be positioned in the text of the first line, then if you give the "View More" button set margin or padding, will be squeezed out of the text. So set padding-top for .box:

Then set margin-top for .text:

The results can be achieved.
/****************************************************************************************************
*************************************2020/09/29 Updated
****************************************************************************************/
Change:
Added the ability to determine if the word count has been exceeded, and whether to display the View More...

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
        .box{
            box-sizing: border-box;
            padding-top: 75px;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        .text{
            margin-top: -75px;
            font-size: 12px;
            line-height: 25px;
            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;
        }
        .rt{
            float: right;
            font-size: 12px;
            line-height: 25px;
        }
        .rt a{
            color:red;
            cursor: pointer;
        }
        .ha{
            height: auto;
        }
        .retract{
            display: none;
        }
        .my_more{
            display: none;
        }

<div class="box clearfix">
        <div class="rt more my_more"> 
            <span>...</span>
            <a>View More</a>
        </div>
        <div class="text">Test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi test ceshi</div>
        <div class="rt retract my_more">
            <a>put away</a>
        </div>
    </div>

$(function(){ 
    $(".rt a").click(function(){
        if($('.more').css("display")!=='none'){
            $(".box").addClass('ha')
            $('.more').hide() 
            $('.retract').show()
        }else{
            $(".box").removeClass('ha')
            $('.more').show() 
            $('.retract').hide()
        }
    });
    if($('.text').height()>$('.box').innerHeight()){//Determine if you need to showView More
        $('.my_more').show()
    }
}); 

Effect:

When just filling the parent container, it will not show View More.