裁剪或省略css居中页面的文本困难

.text-container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

<div class="text-container">
  <span id="text">这是一段很长的文本</span>
</div>

<script>
  var container = document.querySelector('.text-container');
  var text = document.querySelector('#text');
  var containerWidth = container.offsetWidth;
  var textWidth = text.offsetWidth;

  if (textWidth > containerWidth) {
    var truncatedText = text.textContent.substring(0, Math.floor(containerWidth / textWidth * text.textContent.length)) + '...';
    text.textContent = truncatedText;
  }
</script>

<style>
  .text-container {
    width: 200px;
    text-align: center;
  }
</style>