如何在调整文本溢出div大小时处理错误的宽度计算？

<style>
  .overflow-div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
  }

  /* 创建一个隐藏的辅助元素 */
  .helper-element {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
  }
</style>

<div class="overflow-div">
  <span id="text">这是一个很长很长的文本内容</span>
</div>

<script>
  // 获取辅助元素和文本元素
  var helperElement = document.createElement("span");
  var textElement = document.getElementById("text");

  // 将文本内容放入辅助元素中
  helperElement.textContent = textElement.textContent;

  // 将辅助元素添加到body中
  document.body.appendChild(helperElement);

  // 获取辅助元素的实际宽度
  var textWidth = helperElement.offsetWidth;

  // 调整div的宽度
  var divWidth = textWidth + 10; // 可以根据实际需要调整宽度
  document.querySelector(".overflow-div").style.width = divWidth + "px";

  // 移除辅助元素
  document.body.removeChild(helperElement);
</script>