Javascript 截断内联HTML以获得更多/更少阅读按钮

我试图用文本的长度（不包括html）/2截断内联html中的文本，并添加“阅读更多”按钮和“反向-添加阅读更少”按钮并隐藏文本的一半。如果文本仅为原始段落，则该方法有效。但是，当文本是像下面这样的内联html时——带有ol、ul、标题，它就不起作用了。有人能帮忙吗？谢谢大家!

<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');
        }
    }

Lorem Ipsum只是
Lorem Ipsum只是
感谢您的扫描

Lorem Ipsum只是印刷和排版的虚拟文本
工业Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
然后把它拼凑成一本样本书。它没有幸存下来
只有五个
Lorem Ipsum只是
Lorem Ipsum很简单

Lorem Ipsum只是

var numberOfToggled=document.getElementsByClassName（'toggledText'）；
对于（i=0；i charLimit）{
var showStr=elText.slice（0，字符限制）；
var hideStr=elText.slice（charLimit）；
el.innerHTML=showStr+'…'+hideStr+'；
el.parentElement.innerHTML=el.parentElement.innerHTML+“”；
}
}
window.onclick=函数（事件）{
如果（event.target.className=='more'）{
event.preventDefault（）；
event.target.parentElement.parentElement.classList.toggle（'showAll'）；
}
}

没有完美的解决方案，最好使用CSS掩蔽或在缩短之前完全删除标记。

没有完美的解决方案，最好使用CSS掩蔽或在缩短之前完全删除标记。

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

。文本省略号{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

Lorem Ipsum只是印刷和排版的虚拟文本
工业Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
然后把它拼凑成一本样本书。它没有幸存下来
只有五个

输出（请参见第行末尾的三点）：

---

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

。文本省略号{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

Lorem Ipsum只是印刷和排版的虚拟文本
工业Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
然后把它拼凑成一本样本书。它没有幸存下来
只有五个

输出（请参见第行末尾的三点）：

---

在单独的div中创建一个文本，用于显示和隐藏。请检查示例代码段

函数myFunction（）{
var dots=document.getElementById（“dots”）；
var moreText=document.getElementById（“更多”）；
var btnText=document.getElementById（“myBtn”）；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

#更多{显示：无；}
Lorem Ipsum只是
Lorem Ipsum只是
感谢您的扫描

Lorem Ipsum只是印刷和排版的虚拟文本
工业Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
然后把它拼凑成一本样本书。它没有幸存下来
只有五个
...

Lorem Ipsum只是
Lorem Ipsum很简单

Lorem Ipsum只是

阅读更多

在单独的div中创建一个文本，用于显示和隐藏。请检查示例代码段

函数myFunction（）{
var dots=document.getElementById（“dots”）；
var moreText=document.getElementById（“更多”）；
var btnText=document.getElementById（“myBtn”）；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

#更多{显示：无；}
Lorem Ipsum只是
Lorem Ipsum只是
感谢您的扫描

Lorem Ipsum只是印刷和排版的虚拟文本
工业Lorem Ipsum已成为行业标准的虚拟文本
从16世纪开始，一个不知名的印刷工在厨房里打字
然后把它拼凑成一本样本书。它没有幸存下来
只有五个
...

Lorem Ipsum只是
Lorem Ipsum很简单

Lorem Ipsum只是

阅读更多
< /代码> 
你也可以考虑高度方面。

document.querySelector（“#readmore”）.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
document.querySelector（'#toggledText'）.classList.toggle（'toggle'）；
});
.toggledText{
高度：200px；
溢出：隐藏；
}
.toggledText.toggle{
高度：自动；
}
.readless txt，
.toggledText.toggle~#readmore span.readmore-txt{
显示：无；
}
.toggledText.toggle~#readmore span.readless-txt{
显示：块；
}

Lorem Ipsum只是
乱数假文