JS、Vue中如何根据窗口高度分割文本？

嘿，这个需求我之前做阅读器类功能时刚好碰到过，结合你的响应式适配、预知布局的要求，分享几个靠谱的实现思路：

1. 隐藏DOM预渲染计算（最精准的核心方案） #

这个方法的核心是创建一个和目标容器样式完全一致的“影子”元素，把文本放进去计算尺寸——因为它和真实容器的布局逻辑完全相同，所以计算结果最准确，而且不会影响页面渲染。

具体实现步骤： #

• 先创建一个隐藏的容器，确保它不占用页面空间但能正常计算布局：

function calculateTextLayout(targetContainer, text, initialFontSize, minFontSize) {
  // 创建预渲染容器
  const preRenderEl = document.createElement('div');
  // 复制目标容器的核心样式，保证布局一致
  const targetStyles = getComputedStyle(targetContainer);
  preRenderEl.style.cssText = `
    position: absolute;
    left: -9999px;
    visibility: hidden;
    width: ${targetStyles.width};
    height: auto;
    font-size: ${initialFontSize}px;
    font-family: ${targetStyles.fontFamily};
    line-height: ${targetStyles.lineHeight};
    padding: ${targetStyles.padding};
    margin: ${targetStyles.margin};
    white-space: ${targetStyles.whiteSpace};
  `;
  document.body.appendChild(preRenderEl);

  // 填充文本
  preRenderEl.textContent = text;
  const availableHeight = window.innerHeight; // 或目标容器的可用高度
  let contentHeight = preRenderEl.scrollHeight;

  // 方案A：自动调整字体大小适配高度
  if (contentHeight > availableHeight) {
    let adjustedSize = initialFontSize;
    // 逐步缩小字体，直到内容能容纳或达到最小字号
    while (preRenderEl.scrollHeight > availableHeight && adjustedSize > minFontSize) {
      adjustedSize -= 0.5;
      preRenderEl.style.fontSize = `${adjustedSize}px`;
    }
    const finalFontSize = adjustedSize;
  }

  // 方案B：分割文本，只保留能容纳的部分
  if (contentHeight > availableHeight) {
    preRenderEl.textContent = '';
    const textSegments = text.split(/\s+/); // 按空格拆分文本
    let currentIndex = 0;
    // 逐段添加文本，直到接近可用高度
    while (preRenderEl.scrollHeight < availableHeight && currentIndex < textSegments.length) {
      preRenderEl.textContent += `${textSegments[currentIndex]} `;
      currentIndex++;
    }
    // 此时preRenderEl内的内容就是可容纳的部分，剩余部分可另行处理
    const visibleText = preRenderEl.textContent.trim();
    const overflowText = textSegments.slice(currentIndex).join(' ');
  }

  // 用完移除影子容器
  document.body.removeChild(preRenderEl);
  // 返回需要的结果：比如调整后的字号、分割后的文本等
  return { finalFontSize, visibleText, overflowText };
}

2. 结合ResizeObserver适配响应式变化 #

因为你的页面需要适配窗口宽高变化，所以要在容器或窗口尺寸改变时重新计算布局。ResizeObserver是比传统resize事件更精准的选择，它能监听元素尺寸的实时变化：

const targetContainer = document.getElementById('your-target-container');
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // 窗口或容器尺寸变化时，重新执行布局计算
    const layoutResult = calculateTextLayout(
      entry.target,
      yourLongText,
      16, // 初始字号
      12  // 最小字号
    );
    // 应用结果到真实容器
    targetContainer.style.fontSize = `${layoutResult.finalFontSize}px`;
    targetContainer.textContent = layoutResult.visibleText;
    // 处理溢出文本：比如放到下一页、展开按钮等
  }
});

// 监听目标容器的尺寸变化
resizeObserver.observe(targetContainer);

3. CSS辅助方案（简化字体适配） #

如果你的需求重点是字体大小的响应式调整，不需要精确分割文本，可以用CSS的clamp()函数结合容器查询，实现自动适配：

.target-container {
  /* 开启容器查询 */
  container-type: size;
  /* 自动调整字体：最小1rem，最大1.5rem，中间按视窗宽度适配 */
  font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
  /* 设置最大高度为窗口高度 */
  max-height: 100vh;
  overflow: hidden;
}

不过这个方案没法提前获取文本溢出状态，只能做自动适配，适合不需要分割文本的场景。

关键注意事项： #

• 一定要保证预渲染容器的样式和真实容器完全一致，包括padding、line-height、white-space这些影响文本布局的属性，不然计算结果会偏差。
• 如果文本包含HTML标签，要用preRenderEl.innerHTML代替textContent，确保布局计算准确。
• 对于长文本，逐段分割比逐字分割效率更高，能减少DOM重排次数。

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