如何用HTML、JavaScript将段落溢出文本显示到另一个<div>中？

嘿，这个需求其实挺常见的，我来给你捋清楚怎么实现～核心就是利用元素的scrollHeight和offsetHeight属性做对比，再结合简单的DOM操作拆分文本就行，下面是完整的方案：

实现思路 #

• 先判断目标元素是否溢出：当element.scrollHeight > element.offsetHeight时，说明内容超出了容器的固定高度
• 然后逐步拆分文本：从原文本末尾逐个移除字符，直到元素不再溢出，被移除的部分就是溢出内容
• 最后把溢出内容插入到指定的第二个容器中

完整代码示例 #

HTML结构 #

<div class="text-box" id="element1">
  这是一段可能会溢出的长文本，用来测试固定高度容器的文本拆分功能。我得多写点内容让它溢出：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="overflow-box" id="element2">
  <!-- 溢出的文本会被放到这里 -->
</div>

CSS样式 #

.text-box {
  width: 300px;
  height: 100px;
  border: 1px solid #ddd;
  overflow: hidden; /* 隐藏溢出内容，避免默认滚动条 */
  padding: 8px;
}

.overflow-box {
  width: 300px;
  border: 1px solid #2196F3;
  margin-top: 10px;
  padding: 8px;
}

JavaScript逻辑 #

function splitOverflowText(sourceEl, targetEl) {
  // 清空目标容器原有内容
  targetEl.textContent = '';

  // 先判断是否真的溢出
  if (sourceEl.scrollHeight <= sourceEl.offsetHeight) {
    console.log("没有文本溢出哦");
    return;
  }

  // 保存原文本，避免直接修改时丢失数据
  let originalText = sourceEl.textContent;
  let overflowText = '';

  // 循环移除末尾字符，直到元素不再溢出
  while (sourceEl.scrollHeight > sourceEl.offsetHeight) {
    const lastChar = originalText.slice(-1);
    overflowText = lastChar + overflowText;
    originalText = originalText.slice(0, -1);
    // 更新源容器的文本
    sourceEl.textContent = originalText;
  }

  // 把溢出内容放到目标容器里
  targetEl.textContent = overflowText;
}

// 页面加载完成后执行检测
document.addEventListener('DOMContentLoaded', () => {
  const element1 = document.getElementById('element1');
  const element2 = document.getElementById('element2');
  splitOverflowText(element1, element2);
});

关键细节说明 #

• scrollHeight & offsetHeight：scrollHeight是元素内容的总高度（包含溢出部分），offsetHeight是元素在页面上的可见高度（包含内边距和边框），两者对比就能精准判断是否溢出
• 文本拆分逻辑：从末尾逐个移除字符是为了保证前面的内容完整展示，避免中间截断的突兀感
• 动态场景适配：如果你的文本是动态变化的（比如用户输入、接口返回），可以把splitOverflowText函数绑定到文本变化的事件上，实时执行拆分逻辑

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