目录

html

<div class="poem-content">
      {{ poem.get_content_html() | safe }}
</div>

css

.toggle-btn-box {
    margin-top: 10px;
    border-top: 1px solid red;
    text-align: center;
    padding-top: 10px;
}

.toggle-btn {
    color: #ca0c16;
    border: 1px solid #ca0c16;
    display: inline-block;
    padding: 2px 5px;
    border-radius: 5px;
}

js

    $.fn.expandable = function(config) {
      var that = $(this);
      if (that.height() >= 300) {
          var isExpand = true;
          var btnStr = '查看更多';
          $(".poem-content").css("max-height", "260px");

          var btn = $('<div><div class="toggle-btn">' + btnStr + '</div></div>').click(function(e) {
            if (isExpand) {
                $(".poem-content").css("max-height", "");
                $(".toggle-btn").text('折叠文字');
            } else {
                $(".poem-content").css("max-height", "260px");
                $(".toggle-btn").text('查看更多');
            }
            isExpand = !isExpand;
          }).insertAfter(that).addClass('toggle-btn-box');
      }
    };

    $('.poem-content').expandable();

参考