表達能力比較弱，直接看圖

註意圖中"展開全文"虛陰影樣式

HTML:

<div class="article_content">
    <section>
        <h3>您的每一份愛心，都能幫助到一名困難人事</h3>
        <h3>項目詳情</h3>
        <article class="article_box">
            <p>贈人玫瑰，手留余香；奉獻愛心，收獲希望。近日，由重慶寬達物業管理有限公司綜合部組織了一次獻愛心的募捐活動，盛世華城開發商的其中一位員工小孩患有先天性畸形血管病癥，該小孩年齡較小還在醫院重癥病房治療。</
 
p>
            <p>贈人玫瑰，手留余香；奉獻愛心，收獲希望。近日，由重慶寬達物業管理有限公司綜合部組織了一次獻愛心的募捐活動，盛世華城開發商的其中一位員工小孩患有先天性畸形血管病癥，該小孩年齡較小還在醫院重癥病房治療。</p>
            <p>贈人玫瑰，手留余香；奉獻愛心，收獲希望。近日，由重慶寬達物業管理有限公司綜合部組織了一次獻愛心的募捐活動，盛世華城開發商的其中一位員工小孩患有先天性畸形血管病癥，該小孩年齡較小還在醫院重癥病房治療。</p>
        </article>
        <
 
div class="hide_article_box">
            <a href="javascript:void(0)">展開全文</a>
        </div>
    </section>
</div>

CSS:

article_content{
    background:white;
    margin-top:0.2rem;
    padding:0 0.2rem;
}
.article_content section h3{
    font-size:0.24rem;
    height:0.7rem
 
;
    line-height:0.7rem;
}
.article_content article{
    font-size:0.24rem;
    line-height:2;
}
.article_content section{
    position:relative;
    max-height:300px;
    overflow:hidden;
}
.hide_article_box{
    text-align: center;
    background: linear-gradient(to bottom,#585454);
    padding-top: 100px;
    background: linear-gradient(to bottom,rgba(255,255,255,0),#fff);
    position: absolute;
    bottom: 0rem;
    width: 100%;
}
.hide_article_box a{
    font-size:0.3rem;
    color:#fb0000;
    display: block;
    background: white;
}

JQuery:

$(function(){
    var H=$(".article_content section article.article_box").height();
    if(H>150){
        $(".hide_article_box").show();
    }else{
        $(".hide_article_box").hide();
    }
    $(".hide_article_box a").on("click",function(){
        $(".hide_article_box").hide();
        $(".article_content section").css("max-height","none")
    })
})

我當時絆倒在如何動態放開"max-height"的值，起初我一直設為"auto"，但是不起做用，後來測試應該將其設為"none"

網頁中文章顯示一部分，然後“查看全文”