动态截断字符串：在首尾之间显示省略号

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

  // 确保至少保留首尾两个单词
  if (words.length <= 2) {
      container.innerText = text;
      return;
  }

  truncatedText = words[0] + " - "; // 初始化为第一个单词和分隔符

  for (let i = words.length - 1; i > 0; i--) {
    let tempText = truncatedText + "... - " + words[i]; // 尝试添加最后一个单词
    container.innerText = tempText;

    if (container.scrollWidth > containerWidth) {
      // 超出容器宽度，停止添加单词
      container.innerText = truncatedText + "... - " + words[words.length - 1];
      break;
    }
    truncatedText = truncatedText + "... - " + words[i];
  }

  // 如果第一个单词加最后一个单词已经超出宽度，则直接显示第一个单词加省略号
  if (container.scrollWidth > containerWidth) {
      container.innerText = words[0] + "...";
  }
}

// 调用示例
const containerElement = document.getElementById('container');
if (containerElement) {
    truncateText(containerElement);
} else {
    console.error("Container element with ID 'container' not found.");
}

#container {
  width: 220px; /* 容器宽度，可以根据实际情况调整 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
}

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