阅读更多不使用html格式的按钮脚本

Question

我试图添加阅读更多的功能，以一些文本，其中包括标题和段落。但它在一行中显示所有文本。我希望在单击“阅读更多”时将文本格式化。

以下是我正在使用的代码：

$(function() {

  var minimized_elements = $('.case-desc');

  minimized_elements.each(function() {
    var t = $(this).text();
    if (t.length < 200) return;

    $(this).html(
      t.slice(0, 200) + '<span>... </span><a href="" class="umore">More</a>' +
      '<span style="display:none;">' + t.slice(200, t.length) + ' <a href="" class="uless">Less</a></span>'
    );

  });

  $('a.umore', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  });

  $('a.uless', minimized_elements).click(function(event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  });

});

有没有可能得到的文本格式，因为我不能删除标题，并希望显示，因为它是。

下面是我的文本的样子

什么是Lorem Ipsum？

Lorem Ipsum只是印刷和排版行业的虚拟文本。

自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。

但是我越来越

什么是Lorem Ipsum？Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一家不知名的打印机拿走了一厨房的字体，并将其打乱，制作了一本字体标本书。

Answer 1

jQuery(document).ready(function() {
  length = 200;
  cHtml = jQuery(".case-desc").html();
  cText = jQuery(".case-desc").html().substr(0, length).trim();
  jQuery(".case-desc").addClass("compressed").html(cText + "... <a href='#' class='rmore'>More</a>");
  window.handler = function() {
    jQuery('.rmore').click(function() {
      if (jQuery(".case-desc").hasClass("compressed")) {
        jQuery(".case-desc").html(cHtml + "<a href='#' class='rmore'>Less</a>");
        jQuery(".case-desc").removeClass("compressed");
        handler();
        return false;
      } else {
        jQuery(".case-desc").html(cText + "... <a href='#' class='rmore'>More</a>");
        jQuery(".case-desc").addClass("compressed");
        handler();
        return false;
      }
    });
  }
  handler();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="case-desc">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>