如何根据省略号隐藏的文本样式动态设置其颜色并适配宽度变化？

需求说明：

• 容器宽度不固定，支持尺寸动态调整
• 当容器隐藏了红色文本时，省略号显示红色
• 当红色文本完全可见时，省略号显示黑色

实现代码 #

HTML结构

<div>
  <div class="container">
    <span class="content">
      <span>Text</span>
      <span class="red">Text</span>
      <span>Text</span>
    </span>
  </div>
  <div class="container">
    <span class="content">
      <span>Text</span>
      <span class="red">Text</span>
      <span>Text</span>
    </span>
  </div>
</div>

CSS样式

.container {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 10px 0;
}

/* 示例初始宽度，实际可随父元素动态变化 */
.container:nth-child(1) {
  width: 50px;
}

.container:nth-child(2) {
  width: 75px;
}

.red {
  color: red;
}

/* 红色省略号样式 */
.container.red-ellipsis {
  color: red;
}

JavaScript逻辑

// 检测红色文本是否在容器可见范围内
function isRedTextVisible(container) {
  const redText = container.querySelector('.red');
  const containerRect = container.getBoundingClientRect();
  const textRect = redText.getBoundingClientRect();
  // 文本至少有一部分在容器可视区域内则判定为可见
  return textRect.left < containerRect.right && textRect.right > containerRect.left;
}

// 更新省略号颜色
function syncEllipsisColor(container) {
  const content = container.querySelector('.content');
  const isOverflow = content.offsetWidth > container.offsetWidth;
  const isRedVisible = isRedTextVisible(container);

  if (isOverflow && !isRedVisible) {
    container.classList.add('red-ellipsis');
  } else {
    container.classList.remove('red-ellipsis');
  }
}

// 初始化并监听尺寸变化
const containers = document.querySelectorAll('.container');
containers.forEach(container => {
  syncEllipsisColor(container);
  // 监听容器尺寸动态变化
  new ResizeObserver(() => syncEllipsisColor(container)).observe(container);
});

方案说明 #

1. 用ResizeObserver监听容器尺寸变化，实现动态适配
2. 通过对比内容容器与外层容器的宽度，判断是否出现文本溢出
3. 检测红色文本是否处于容器可视区域内，决定省略号的颜色
4. 容器宽度无需固定，可随父元素或窗口尺寸自动调整

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