js如何实现当文本内容过长时，中间显示省略号...,两端正常展示

在JavaScript中，可以通过设置元素的textContent或innerText属性来实现当文本内容过长时，中间显示省略号(...)，两端正常显示的效果。这通常通过CSS配合JavaScript来实现。

下面是一个简单的实现方法：

HTML:

<div id="text-container">这是一段很长的文本内容，需要在过长时显示省略号...</div>

CSS:

#text-container {
  width: 200px; /* 定义容器宽度 */
  white-space: nowrap; /* 保持文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}

JavaScript:

function truncateText(container, maxWidth) {
  const element = document.getElementById(container);
  const text = element.textContent;
  const span = document.createElement('span');
 
  span.textContent = text;
  element.textContent = '';
  element.appendChild(span);
  
  // 使用ResizeObserver监听元素宽度变化，动态调整显示逻辑
  new ResizeObserver(() => {
    if (element.scrollWidth > maxWidth) {
      span.style.overflow = 'hidden';
      span.style.textOverflow = 'ellipsis';
      span.style.whiteSpace = 'nowrap';
      span.style.width = `${maxWidth}px`;
    } else {
      span.style.width = 'auto';
    }
  }).observe(element);
}
 
// 调用函数，传入容器ID和最大宽度
truncateText('text-container', 200);

上述代码中，truncateText函数接受两个参数：container是容器元素的ID，maxWidth是容器的最大宽度。函数内部创建了一个span元素，将文本内容添加到span中，并通过监听容器的宽度变化来动态决定是否需要显示省略号。如果文本内容超出了最大宽度，则在中间显示省略号，两端正常显示文本。