求助：内嵌HTML文本按纯文本长度截断并实现展开/收起功能

你的问题根源在于直接操作innerHTML字符串来截断内容——这种方式会把HTML标签的字符也算入长度计算，而且很容易截断到标签中间，破坏DOM结构（比如把<ol>切成<o），导致列表、标题这些元素无法正常渲染。

要处理包含复杂HTML结构的内容截断，我们需要先提取纯文本内容计算长度，再找到对应的DOM节点位置来分割内容，而不是粗暴切割HTML字符串。下面是完整的解决方案：

实现思路 #

1. 计算纯文本长度：用textContent获取元素的纯文本，避免把HTML标签算入长度。
2. 遍历DOM节点分割内容：递归遍历元素的子节点，累计文本长度，找到刚好超过截断长度的位置，将剩余内容移到隐藏容器中。
3. 用CSS控制显示隐藏：通过添加/移除类来切换显示状态，避免频繁修改DOM结构。

完整代码示例 #

HTML结构 #

<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 </p>
    <ol>
      <li>Lorem Ipsum is simply </li>
      <li>Lorem Ipsum is simply. </li>
    </ol>
    <ul>
      <li>Lorem Ipsum is simply </li>
    </ul>
  </div>
</div>

CSS样式 #

/* 隐藏截断后的内容 */
.truncate .hidden-content {
  display: none;
}

/* 展开时显示隐藏内容 */
.truncate.show-all .hidden-content {
  display: block;
}

/* 省略号样式 */
.more-points {
  margin-right: 0.5em;
}

/* 按钮样式 */
.read-more {
  margin-top: 1em;
}
.read-more a {
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}

JavaScript逻辑 #

function setupTruncateElements() {
  const toggledTextElements = document.getElementsByClassName('toggledText');
  
  Array.from(toggledTextElements).forEach(el => {
    const fullText = el.textContent.trim();
    const charLimit = Math.floor(fullText.length / 2); // 取纯文本长度的一半作为截断点
    
    if (fullText.length <= charLimit) {
      // 内容长度不足，无需截断
      return;
    }

    // 创建隐藏容器，用于存放截断后的内容
    const hiddenContent = document.createElement('div');
    hiddenContent.className = 'hidden-content';
    
    let currentLength = 0;
    let shouldMoveNodes = false;

    // 递归遍历节点，分割内容
    function traverseNodes(node) {
      if (node.nodeType === Node.TEXT_NODE) {
        const text = node.textContent;
        if (!shouldMoveNodes) {
          const remainingLength = charLimit - currentLength;
          if (text.length > remainingLength) {
            // 截断当前文本节点
            const visibleText = text.slice(0, remainingLength);
            const hiddenText = text.slice(remainingLength);
            node.textContent = visibleText;
            
            // 创建省略号节点
            const ellipsis = document.createTextNode('...');
            node.parentNode.insertBefore(ellipsis, node.nextSibling);
            
            // 将剩余文本放入隐藏容器
            const hiddenTextNode = document.createTextNode(hiddenText);
            hiddenContent.appendChild(hiddenTextNode);
            
            shouldMoveNodes = true;
          } else {
            currentLength += text.length;
          }
        } else {
          // 把节点移到隐藏容器
          hiddenContent.appendChild(node);
        }
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        if (!shouldMoveNodes) {
          // 先处理子节点
          Array.from(node.childNodes).forEach(child => traverseNodes(child));
        } else {
          // 把整个元素移到隐藏容器
          hiddenContent.appendChild(node);
        }
      }
    }

    // 遍历当前元素的所有子节点
    Array.from(el.childNodes).forEach(child => traverseNodes(child));
    
    // 把隐藏容器添加到当前元素后面
    el.appendChild(hiddenContent);
    
    // 添加展开/收起按钮
    const readMoreDiv = document.createElement('div');
    readMoreDiv.className = 'read-more';
    readMoreDiv.innerHTML = '<a href="#" class="toggle-btn">展开</a>';
    el.parentElement.appendChild(readMoreDiv);
    
    // 绑定按钮事件
    const toggleBtn = readMoreDiv.querySelector('.toggle-btn');
    toggleBtn.addEventListener('click', (e) => {
      e.preventDefault();
      el.parentElement.classList.toggle('show-all');
      toggleBtn.textContent = el.parentElement.classList.contains('show-all') ? '收起' : '展开';
    });
  });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', setupTruncateElements);

代码说明 #

1. 纯文本长度计算：用textContent获取元素的纯文本内容，确保截断长度是真实的文本长度，不含HTML标签。
2. 节点遍历与分割：递归遍历每个DOM节点，累计文本长度，当达到截断长度时，截断当前文本节点并添加省略号，之后的所有节点都移到隐藏容器中，保证HTML结构完整。
3. 按钮交互：通过添加/移除show-all类来控制隐藏内容的显示，按钮文本同步切换，交互更友好。

这个方案可以完美处理包含标题、列表、粗体等HTML标签的内容，不会破坏DOM结构，同时准确按纯文本长度截断。

内容的提问来源于stack exchange，提问作者xx5ko