javascript - 为阅读更多/更少按钮截断内联 HTML

Question

我正在尝试通过文本长度（不包括 html）/2 截断内联 html 内的文本，并添加阅读更多按钮和反向 - 添加阅读更少按钮并隐藏一半文本。如果文本只是原始段落，它可以工作。但是，当文本是像下面这样的内联 html - 带有 ol、ul、headings 时，它就不起作用了。有人可以帮忙吗？谢谢！

<div class="truncate">
 <div class="toggledText" id="toggledText">
 <h1>Lorem Ipsum is simply </h1>
  <h2>Lorem Ipsum is simply </h2>
  <p><strong>Thank you for scanning. </strong></p> 
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text 
    ever since the 1500s, when an unknown printer took a galley of type 
    and scrambled it to make a type specimen book. It has survived not 
    only five
   <ol>
    <li>Lorem Ipsum is simply </li>
    <li>Lorem Ipsum is simply. </li>
   </ol>
   <ul>
    <li>Lorem Ipsum is simply </li>
    </ul>



   var numberOfToggled = document.getElementsByClassName('toggledText');

   for(i=0; i<numberOfToggled.length; i++){

    var el = numberOfToggled[i];


  var elText = el.innerHTML.trim();
  var charLimit = elText.length / 2;

        if(elText.length > charLimit){
            var showStr = elText.slice(0,charLimit);
            var hideStr = elText.slice(charLimit);
            el.innerHTML = showStr + '<span class="morePoints">...</span> <span class="trimmed">' + hideStr + '</span>';
            el.parentElement.innerHTML = el.parentElement.innerHTML + "<div class='read-more'><a href='#' class='more'></a>";
        }

    }

    window.onclick = function(event) {
        if (event.target.className == 'more') {
    event.preventDefault();
            event.target.parentElement.parentElement.classList.toggle('showAll');
        }
    }

标签： javascripthtml

Answer 1

您还可以考虑高度方面。

document.querySelector('#readmore').addEventListener("click", function(e) {
  e.preventDefault();
  document.querySelector('#toggledText').classList.toggle('toggle');
});

.toggledText {
  height: 200px;
  overflow: hidden;
}

.toggledText.toggle {
 height: auto;
}

.readless-txt,
.toggledText.toggle~#readmore span.readmore-txt {
  display: none;
 }

.toggledText.toggle~#readmore span.readless-txt {
   display: block;
}

<div class="truncate">
  <div class="toggledText" id="toggledText">
    <h1>Lorem Ipsum is simply </h1>
    <h2>Lorem Ipsum is simply </h2>
    <p><strong>Thank you for scanning. </strong></p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five
      <ol>
        <li>Lorem Ipsum is simply </li>
        <li>Lorem Ipsum is simply. </li>
      </ol>
      <ul>
        <li>Lorem Ipsum is simply </li>
      </ul>
  </div>
  <a href="#" id="readmore"><span class="readmore-txt">Read more</span><span class="readless-txt">Read Less</span></a>
</div>