通过预计算所有待插入子元素的文本宽度（或长度），在首次渲染前为父容器设定固定宽度，可避免动态追加内容时父容器反复重排导致的布局抖动。

通过预计算所有待插入子元素的文本宽度（或长度），在首次渲染前为父容器设定固定宽度，可避免动态追加内容时父容器反复重排导致的布局抖动。

在实际开发中，当一个 div 以 inline-block 方式居中显示，且其子元素为左对齐的纯文本块时，若后续动态插入比现有内容更长的子元素，浏览器会触发重排（reflow），导致容器突然“弹开”——这种视觉跳动严重影响用户体验。

核心思路是：在任何子元素被真实插入 DOM 前，预先获知所有可能子元素的宽度，并将父容器宽度设为最大值。这可通过两种稳健方式实现：

✅ 方案一：预计算文本渲染宽度（推荐，精确可靠）

利用临时 span 元素在内存中测量每段文本的真实像素宽度（考虑字体、字号、行高、padding 等）：

function getTextWidth(text, font = '16px sans-serif') {
  const span = document.createElement('span');
  span.style.visibility = 'hidden';
  span.style.position = 'absolute';
  span.style.whiteSpace = 'nowrap';
  span.style.font = font;
  span.textContent = text;
  document.body.appendChild(span);
  const width = span.offsetWidth;
  document.body.removeChild(span);
  return width;
}

// 预先收集所有待插入字符串（包括已存在和将新增的）
const allChildren = [
  'this is the first child',
  'this is the second child',
  'I am the longest child of them all'
];

const maxWidth = Math.max(...allChildren.map(str => getTextWidth(str)));
document.getElementById('original').style.width = `${maxWidth}px`;

⚠️ 注意：getTextWidth 中必须设置 whiteSpace: nowrap 以模拟单行内联块行为；若子元素含换行符（如 <br>），需替换为空格或按行分别测量后取最大。

✅ 方案二：隐藏预渲染 + visibility: hidden（轻量兼容）

不依赖像素计算，而是将所有候选子元素（含最长项）以 visibility: hidden 方式提前插入 DOM 并测量，再移除：

function setOptimalWidth(childStrings) {
  const container = document.getElementById('original');
  const tempDiv = document.createElement('div');
  tempDiv.style.visibility = 'hidden';
  tempDiv.style.position = 'absolute';
  tempDiv.style.left = '-9999px';

  childStrings.forEach(str => {
    const el = document.createElement('div');
    el.innerHTML = str; // 或 el.textContent = str
    tempDiv.appendChild(el);
  });

  document.body.appendChild(tempDiv);
  container.style.width = `${tempDiv.offsetWidth}px`;
  document.body.removeChild(tempDiv);
}

// 调用前确保已知全部子内容
setOptimalWidth([
  'this is the first child',
  'this is the second child',
  'I am the longest child of them all'
]);

✅ 优势：无需手动指定字体样式，完全复现真实渲染环境；
❗ 注意：需确保 tempDiv 不影响布局（绝对定位 + 移出视口），且测量后立即清理。

? 最终整合：安全追加逻辑

修改原始 appendChildToDiv，使其不再直接拼接 innerHTML（易引发 XSS 和重排），而采用 appendChild + 预设宽度保护：

function appendChildToDiv(stringToAppend) {
  const originalDiv = document.getElementById('original');
  const newDiv = document.createElement('div');
  newDiv.textContent = stringToAppend;
  originalDiv.appendChild(newDiv);
}

只要父容器 #original 的宽度已在初始化阶段锁定（如上任一方案），后续追加操作将严格保持尺寸稳定，彻底消除“bop”抖动。

✅ 总结：避免动态宽度抖动的关键不是“阻止扩展”，而是“主动声明最大边界”。优先使用方案一（像素级精准），兼顾性能与可靠性；若项目对 CSS 渲染一致性要求极高，方案二更贴近真实渲染链路。