如何将容器中被隐藏的溢出内容转移至新容器？

当然能做到！虽然overflow: hidden把超出容器的文本给藏起来了，但这些文本并没有从DOM里消失，完全可以用JavaScript把它们提取出来，放到新容器里。我经常在做内容折叠、多容器分页这类需求时用到类似的逻辑，下面给你两种实用方案，适配不同场景：

方法一：纯文本场景下的快速提取 #

如果你的容器里就是单纯的文本，没有复杂的行内元素（比如<a>、<span>），那可以用这种简单高效的方法：
核心思路是通过克隆一个和原容器样式完全一致的“隐形容器”，用二分法找到刚好不溢出的文本长度，然后把超出的部分切出来放到新容器。

代码示例 #

const originalContainer = document.getElementById('original-box');
const newContainer = document.getElementById('new-box');
const fullText = originalContainer.textContent.trim();

// 创建和原容器样式一致的克隆容器，用来测试文本溢出
const cloneContainer = originalContainer.cloneNode(false);
cloneContainer.style.position = 'absolute';
cloneContainer.style.visibility = 'hidden';
cloneContainer.style.height = 'auto'; // 让克隆容器高度自适应内容
document.body.appendChild(cloneContainer);

let visibleTextLength = 0;
// 用二分法找最大可见文本长度，比逐字符循环效率更高
let left = 0, right = fullText.length;
while (left <= right) {
  const mid = Math.floor((left + right) / 2);
  cloneContainer.textContent = fullText.slice(0, mid);
  if (cloneContainer.offsetHeight <= originalContainer.offsetHeight) {
    visibleTextLength = mid;
    left = mid + 1;
  } else {
    right = mid - 1;
  }
}

// 更新原容器和新容器的内容
originalContainer.textContent = fullText.slice(0, visibleTextLength);
newContainer.textContent = fullText.slice(visibleTextLength);

// 清理克隆容器
document.body.removeChild(cloneContainer);

方法二：复杂内容场景的精确处理 #

如果容器里混有行内元素、图片或者其他复杂内容，纯文本截取就不太靠谱了。这时候需要逐个检测元素的可见性，把完全/部分不可见的内容移到新容器。

核心思路是利用getBoundingClientRect()获取元素的位置信息，判断元素是否超出容器的边界；对于部分可见的文本节点，还需要进一步拆分内容。

代码示例 #

const originalContainer = document.getElementById('original-box');
const newContainer = document.getElementById('new-box');
const containerRect = originalContainer.getBoundingClientRect();

// 递归处理节点，从后往前遍历避免节点移动导致的遍历异常
function processContentNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    const textContent = node.textContent;
    if (!textContent.trim()) return; // 跳过空文本节点

    // 创建临时span测试文本高度
    const tempSpan = document.createElement('span');
    tempSpan.textContent = textContent;
    originalContainer.appendChild(tempSpan);
    const tempSpanRect = tempSpan.getBoundingClientRect();

    if (tempSpanRect.bottom > containerRect.bottom) {
      // 文本节点超出了，用二分法找拆分点
      let splitIndex = 0;
      let left = 0, right = textContent.length;
      while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        tempSpan.textContent = textContent.slice(0, mid);
        if (tempSpan.getBoundingClientRect().bottom <= containerRect.bottom) {
          splitIndex = mid;
          left = mid + 1;
        } else {
          right = mid - 1;
        }
      }
      // 更新原文本节点
      node.textContent = textContent.slice(0, splitIndex);
      // 把隐藏部分放到新容器
      const hiddenText = document.createTextNode(textContent.slice(splitIndex));
      newContainer.appendChild(hiddenText);
    }
    originalContainer.removeChild(tempSpan);
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    const elementRect = node.getBoundingClientRect();
    if (elementRect.bottom > containerRect.bottom) {
      // 整个元素都超出了，直接移动到新容器
      newContainer.appendChild(node);
    } else {
      // 递归处理元素的子节点
      Array.from(node.childNodes).reverse().forEach(child => processContentNodes(child));
    }
  }
}

// 开始处理原容器的子节点
Array.from(originalContainer.childNodes).reverse().forEach(processContentNodes);

关键注意事项 #

• 确保原容器的宽高是固定的，且设置了overflow: hidden，否则位置和高度计算会失效。
• 克隆容器必须和原容器的样式完全一致，包括字体、行高、padding、border这些会影响文本排版的属性。
• 如果容器有padding，计算高度时可以用clientHeight（内容高度+padding）代替offsetHeight（内容高度+padding+border），结果会更准确。

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