为阅读更多/更少按钮截断内联 HTML答案

【问题标题】：Truncate inline HTML for Read More/Less Button为阅读更多/更少按钮截断内联 HTML
【发布时间】：2019-10-15 22:18:43
【问题描述】：

我试图通过文本长度（不包括 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');
        }
    }

【问题讨论】：

标签： javascript html

【解决方案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>

【讨论】：

不是我要找的东西，但它是一个不错且干净的解决方法。非常感谢！！

【解决方案2】：

对此没有完美的解决方案，最好使用 CSS 掩码 https://css-tricks.com/text-fade-read-more/ 或在缩短之前完全删除标签。

【讨论】：

【解决方案3】：

如果您的文本在没有可用空间的情况下被截断，那么您可以使用 CSS 属性：

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p class="text-ellipsis">
    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
</p>

输出（请看行尾的三个点）：

【讨论】：

【解决方案4】：

在单独的 div 中创建一个文本来显示和隐藏。请检查示例代码 sn-p。

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<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
<span id="dots">...</span><div id="more">
<p>
	<ol>
    <li>Lorem Ipsum is simply </li>
    <li>Lorem Ipsum is simply. </li>
   </ol>
   <ul>
    <li>Lorem Ipsum is simply </li>
    </ul></div></p>
<button onclick="myFunction()" id="myBtn">Read more</button>


</body>
</html>

【讨论】：