Question

我正在尝试将内联html内的文本截短为文本长度（不包括html）/ 2，然后添加更多阅读按钮并反向-添加更少阅读按钮并隐藏文本的一半。如果文本仅是原始段落，则可以使用。但是，当文本是如下所示的内联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');
        }
    }

Answer 1

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

Answer 2

如果在没有可用空间的情况下文本应被截断，则可以使用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>

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

Answer 3

在单独的div中显示和隐藏文本。请检查示例代码段。

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>

Answer 4

您还可以考虑高度方面。

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>

截断内联HTML以获取更多/更少按钮

4 个答案: