我想知道如何縮短下面的文本以適應它的容器。容器的寬度因屏幕尺寸而異。為了適應它的容器，第一個單詞和最后一個單詞之間的字符串將被替換為盡可能多的點，以便適應容器，所以類似于Sydney -...基多。理想情況下，它只替換整個單詞(如多哈、新加坡、...)并保留破折號-在第一個單詞之后/在最后一個單詞之前。

.container {
    background-color: hotpink;
    width: 200px;
    white-space: nowrap
}

<div class='container'>
  <p class='route'>Sydney - Doha - Singapur - Capetown - Quito</p>
</div>

function truncateText(container) {
  const text = container.innerText;
  const containerWidth = container.clientWidth;
  const words = text.split(' ');
  let truncatedText = '';

  for (let i = 0; i < words.length; i++) {
    const tempText = truncatedText + ' ' + words[i];
    container.innerText = tempText + '...';
    if (container.scrollWidth > containerWidth) {
      container.innerText = truncatedText + '...';
      break;
    }
    truncatedText = tempText;
  }
}


truncateText(document.getElementById('container'))

#container {
  width: 220px;
  white-space: nowrap;
  overflow-wrap: break-word;
}

<div id="container">
  content content content content content content content content content
</div>