text-overflow:ellipsis与overflow:scroll冲突：滚动时省略号后内容无法显示

在div元素中遇到scroll与text-overflow行为异常：当容器有额外空间时，省略号后的内容本该自动变为可见，但实际未生效。使用的CSS代码如下：

overflow: scroll;
white-space: nowrap;
text-overflow: ellipsis;

• 问题核心：overflow: scroll会强制容器显示滚动条，且该属性与text-overflow: ellipsis的兼容逻辑是——仅当容器宽度固定、内容超出容器时，省略号才会触发；但scroll状态下浏览器会始终维持滚动容器特性，不会随可用空间自动调整文本显示。

• 方案1：替换overflow属性为auto
  将overflow: scroll改为overflow: auto，这样内容未超出容器时不显示滚动条，text-overflow: ellipsis在内容溢出时生效，容器有额外空间时文本自动展开：

  overflow: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  

• 方案2：JS动态切换属性
  若需保留滚动条显示逻辑，可通过JavaScript监听容器宽度变化，动态切换overflow值：

  const targetDiv = document.querySelector('.your-div-class');
  function adjustTextDisplay() {
    if (targetDiv.scrollWidth > targetDiv.clientWidth) {
      targetDiv.style.overflow = 'scroll';
      targetDiv.style.textOverflow = 'ellipsis';
    } else {
      targetDiv.style.overflow = 'visible';
      targetDiv.style.textOverflow = '';
    }
  }
  // 初始化检查
  adjustTextDisplay();
  // 监听窗口尺寸变化
  window.addEventListener('resize', adjustTextDisplay);
  

• 方案3：嵌套容器分离逻辑
  用外层容器控制宽度与滚动，内层容器处理文本溢出：

  <div class="outer-box">
    <div class="text-content">你的长文本内容</div>
  </div>
  

  .outer-box {
    width: 300px; /* 可设为自适应宽度 */
    overflow: auto;
  }
  .text-content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 100%;
  }
  

  外层容器空间充足时，内层文本自动展开；空间不足时显示省略号，外层出现滚动条。

内容的提问来源于stack exchange，提问作者powercrane97