Jquery实现超出容器限制高度自动隐藏展开

演示

代码

直接上html

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .container {
            max-width: 1100px;
            margin: 0 auto;
            margin-top: 150px;
        }
  
        .desc-collapse.showdown {
            max-height: 385px;
            display: block;
            overflow: hidden;
            transition: 0.3s all ease-in-out;
            position: relative;
            z-index: 2;
        }
  
        .desc-collapse.showdown:before {
            display: block;
            content: "";
            height: 400px;
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            z-index: 7;
            background: linear-gradient(rgba(255, 255, 255, 0) 0, rgb(255, 255, 255) 100%, #fff);
            border-bottom: 1px solid #fff;
        }
  
        .button-toggle {
            display: block;
            text-align: center;
            background-color: transparent;
            padding: 10px;
            position: relative;
            z-index: 1;
        }
  
        .button-toggle a {
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 400;
            color: #dc4848;
            padding: 5px 15px;
            border: 1px solid #f1c0ba;
            border-radius: 20px;
            display: inline-block;
        }
  
        .button-toggle a:hover {
            background-color: #dc4848;
            color: rgb(218, 218, 218);
            transition: all 0.2s ease-in-out 0s;
        }
  
        .button-toggle svg {
            vertical-align: middle;
        }
  
        .button-toggle a.active .toggle-less,
        .button-toggle a .toggle-more {
            display: block;
        }
  
        .button-toggle a.active .toggle-more,
        .button-toggle a .toggle-less {
            display: none;
        }
  
        .desc-collapse img {
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item-article desc-collapse showdown">
            <span>这是一串填充字符，句子是语言运用的基本单位，它由词、词组(短语)构成，能表达一个完整的意思，如告诉别人一件事情，提出一个问题，表示要求或者制止，表示某种感慨，表示对一段话的延续或省略。句子和句子中间有比较大停顿。它的结尾应该用上句号、问号、省略号、或感叹号，句子是语言运用的基本单位，它由词、词组(短语)构成，能表达一个完整的意思，如告诉别人一件事情，提出一个问题，表示要求或者制止，表示某种感慨，表示对一段话的延续或省略。句子和句子中间有比较大停顿。它的结尾应该用上句号、问号、省略号、或感叹号</span>
            <img src="https://www.silencetime.com/usr/themes/handsome/assets/img/sj/2.jpg">
        </div>
        <div class="button-toggle">
            <a class="showmore" data-toggle="collapse" href="#">
                <span class="toggle-more">展开 <i data-feather="chevrons-down"></i></span>
                <span class="toggle-less">收起 <i data-feather="chevrons-up"></i></span>
            </a>
        </div>
    </div>
</body>
<script src="https://unpkg.com/feather-icons"></script>
<!-- 引入图标框架, 可选 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入jquery -->
<script>
    $(".button-toggle").click(function() {
        if ($(this).children('.showmore').hasClass('active')) $(this).children().removeClass('active');
        else $(this).children().addClass('active');
        if ($(this).prev().hasClass('showdown')) $(this).prev().removeClass('showdown').addClass('showup');
        else $(this).prev().removeClass('showup').addClass('showdown');
    });
</script>
<script>
    feather.replace()
</script>
<html>