求助：如何基于文本内容分块调整contenteditable div的宽度？

你遇到的核心问题确实是拿div自身的宽度和自己比较，没有获取到文本的真实宽度，所以逻辑完全不对。要实现你的需求，关键是先准确测量文本内容的实际宽度，再基于这个宽度来调整div的尺寸。

第一步：实现文本宽度测量函数 #

要获取文本的真实宽度，我们可以创建一个隐藏的辅助元素（比如span），复制目标div的关键样式（字体、内边距等），把文本放进去后读取它的宽度。这样能保证测量结果和文本在目标div里的实际显示宽度一致：

private getTextWidth(text: string): number {
  if (!this.el) return 0;
  
  // 创建用于测量的隐藏span
  const measurementSpan = document.createElement('span');
  const targetStyle = window.getComputedStyle(this.el);
  
  // 复制目标div的关键样式，确保测量准确
  measurementSpan.style.fontSize = targetStyle.fontSize;
  measurementSpan.style.fontFamily = targetStyle.fontFamily;
  measurementSpan.style.fontWeight = targetStyle.fontWeight;
  measurementSpan.style.padding = targetStyle.padding;
  measurementSpan.style.whiteSpace = 'nowrap'; // 强制单行，避免文本换行影响宽度测量
  measurementSpan.style.visibility = 'hidden'; // 隐藏元素，不干扰页面布局
  measurementSpan.style.position = 'absolute'; // 脱离文档流
  measurementSpan.textContent = text;
  
  // 插入到页面后获取宽度，然后移除
  document.body.appendChild(measurementSpan);
  const textWidth = measurementSpan.clientWidth;
  document.body.removeChild(measurementSpan);
  
  return textWidth;
}

第二步：修改动态宽度逻辑 #

现在我们可以用文本宽度来判断是否需要调整div的宽度了。按照你的需求：初始宽度100px，文本填充到当前div宽度的90%时增加固定值（比如100px），直到达到最大宽度：

get style(): string {
  if (!this.el) {
    return `width: 100px; line-height: ${DEFAULT_HEIGHT}px; max-height: inherit;`;
  }
  
  const initialWidth = 100;
  const widthIncrement = 100; // 每次增加的固定宽度
  const triggerThreshold = 0.9; // 文本宽度达到当前div宽度的90%时触发增量
  const maxWidth = window.innerWidth - SCROLLBAR_WIDTH;
  
  // 获取div内的文本内容和实际宽度
  const contentText = this.el.textContent || '';
  const actualTextWidth = this.getTextWidth(contentText);
  
  let targetDivWidth = initialWidth;
  
  // 循环判断：如果文本宽度超过当前div宽度的90%，且还没到最大宽度，就增加宽度
  while (actualTextWidth > targetDivWidth * triggerThreshold && targetDivWidth < maxWidth) {
    const newWidth = targetDivWidth + widthIncrement;
    // 防止超过最大宽度
    targetDivWidth = newWidth > maxWidth ? maxWidth : newWidth;
  }
  
  // 确保div宽度不会小于初始值
  targetDivWidth = Math.max(targetDivWidth, initialWidth);
  
  return `width: ${targetDivWidth}px; line-height: ${DEFAULT_HEIGHT}px; max-height: inherit;`;
}

关键说明 #

1. 为什么用辅助元素测量？：直接用div的clientWidth只能拿到div自身的宽度，而不是文本内容的宽度——当div宽度大于文本宽度时，clientWidth是div的设置宽度，不是文本的实际宽度。
2. 样式复制的重要性：如果不复制目标div的字体、内边距等样式，测量出来的文本宽度会和实际显示的不一致，导致调整时机错误。
3. 循环逻辑优化：如果你觉得循环不够高效，也可以用数学计算直接算出需要的增量次数：

// 替代循环的计算方式
let targetDivWidth = initialWidth;
const excessTextWidth = actualTextWidth - (initialWidth * triggerThreshold);
if (excessTextWidth > 0) {
  // 计算需要增加多少次宽度
  const neededIncrements = Math.ceil(excessTextWidth / (widthIncrement * triggerThreshold));
  targetDivWidth = initialWidth + neededIncrements * widthIncrement;
}
// 限制最大宽度
targetDivWidth = Math.min(targetDivWidth, maxWidth);

注意事项 #

• 确保this.el是已经挂载到DOM上的元素，否则getComputedStyle无法获取正确的样式。
• 如果你的div允许文本换行，需要调整测量逻辑（比如去掉whiteSpace: nowrap，让span的初始宽度和div一致，通过高度判断，但你的需求看起来是单行场景）。
• 确认SCROLLBAR_WIDTH和DEFAULT_HEIGHT已经正确定义，避免变量未定义错误。

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