如何按每200px高度在多列段落中插入HTML元素实现分段

要解决CSS分栏（column-count:3）下按间隔高度插入元素的问题，核心难点在于浏览器会自动将内容流式分配到多栏中，直接操作整个段落的DOM无法感知分栏后的高度分布。下面是可行的实现方案：

核心思路 #

通过Range API精准定位文本流中距离当前起始点200px的位置，将文本分割后插入目标元素，循环执行直到剩余内容高度不足200px。这种方法能适配分栏布局的流式特性，不会被分栏的自动拆分干扰。

代码实现 #

$(document).ready(function() {
  const $newspaper = $('.newspaper');
  const $paragraph = $newspaper.find('p');
  const insertHeight = 200; // 间隔高度
  const insertEl = $('<span class="split-marker">TEST</span>')[0];

  function insertSplitMarker(el) {
    const range = document.createRange();
    const selection = window.getSelection();
    
    // 获取当前元素的顶部位置
    const elTop = el.getBoundingClientRect().top;
    // 目标插入位置的Y坐标
    const targetY = elTop + insertHeight;

    // 遍历文本节点，找到高度超过targetY的位置
    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
    let currentNode;
    while (currentNode = walker.nextNode()) {
      // 逐个字符检查位置，避免跨节点判断误差
      for (let i = 0; i < currentNode.length; i++) {
        range.setStart(currentNode, i);
        range.setEnd(currentNode, i + 1);
        const rect = range.getBoundingClientRect();
        if (rect.bottom > targetY) {
          // 分割文本节点
          const splitNode = currentNode.splitText(i);
          // 在分割点插入元素
          splitNode.parentNode.insertBefore(insertEl.cloneNode(true), splitNode);
          // 递归处理剩余内容
          insertSplitMarker(splitNode.parentNode);
          return;
        }
      }
    }
  }

  // 初始调用，处理整个段落
  insertSplitMarker($paragraph[0]);
});

关键细节说明 #

• Range API：用于精准定位文本流中的任意位置，避免直接操作DOM导致的分栏布局错乱。
• TreeWalker：遍历段落内的所有文本节点，确保不会遗漏嵌套元素内的文本。
• 递归处理：每次插入元素后，对剩余的文本内容重复执行插入逻辑，直到剩余内容高度不足200px。
• 适配分栏：通过getBoundingClientRect()获取实时的元素位置，无论浏览器如何拆分分栏，都能准确找到插入点。

样式补充（可选） #

为了让分隔元素更清晰，可以添加样式：

.split-marker {
  display: block;
  margin: 10px 0;
  color: red;
  font-weight: bold;
}

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