是否有类似:is-showing-ellipsis的CSS选择器？如何添加省略号后问号图标？

嘿，这两个问题问得很到位！我来给你详细拆解：

很遗憾，目前原生CSS里并没有专门检测元素是否显示省略号的伪类选择器。原因在于，text-overflow: ellipsis的触发属于元素的「运行时状态」——它取决于元素的内容长度、容器宽度等动态因素，而CSS本身是静态样式语言，没法直接感知这种动态的溢出状态。

不过，我们可以通过JavaScript结合CSS类来模拟类似的效果，这也正好能解决你的第二个问题。

核心思路是：先用JavaScript判断元素是否真的触发了text-overflow: ellipsis，再给符合条件的元素添加自定义类，最后通过CSS类来渲染问号图标。具体实现步骤如下：

第一步：设置基础HTML和CSS #

先给需要省略的<span>设置基础样式，同时准备好问号图标的样式（默认隐藏）：

<span class="ellipsis-text">这是一段会触发省略效果的超长文本，用来测试我们的功能是否正常工作</span>
<span class="ellipsis-text">这段文本很短，不会触发省略</span>

.ellipsis-text {
  display: inline-block; /* 必须设置为块级/行内块，才能获取正确的宽度 */
  max-width: 200px; /* 限制容器宽度，触发省略的前提 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; /* 让问号图标可以基于该元素定位 */
}

/* 问号图标样式，只有添加了has-ellipsis类才显示 */
.ellipsis-text.has-ellipsis::after {
  content: "?";
  position: absolute;
  right: 0;
  top: 0;
  margin-left: 5px;
  color: #555;
  font-size: 0.9em;
  cursor: help; /* 添加鼠标悬停提示的光标样式 */
}

第二步：用JavaScript检测省略状态 #

写一个函数判断元素是否溢出，然后给符合条件的元素添加类：

// 判断元素是否触发了text-overflow: ellipsis
function isShowingEllipsis(element) {
  // scrollWidth是元素内容的实际宽度，clientWidth是元素的可见宽度
  return element.scrollWidth > element.clientWidth;
}

// 页面加载完成后初始化检测
document.addEventListener('DOMContentLoaded', () => {
  const ellipsisElements = document.querySelectorAll('.ellipsis-text');
  ellipsisElements.forEach(el => {
    if (isShowingEllipsis(el)) {
      el.classList.add('has-ellipsis');
    }
  });
});

// 窗口大小变化时重新检测（避免窗口缩放后状态不准确）
window.addEventListener('resize', () => {
  const ellipsisElements = document.querySelectorAll('.ellipsis-text');
  ellipsisElements.forEach(el => {
    if (isShowingEllipsis(el)) {
      el.classList.add('has-ellipsis');
    } else {
      el.classList.remove('has-ellipsis');
    }
  });
});

额外提示： #

• 必须确保元素是inline-block或block类型，否则scrollWidth和clientWidth的对比会失效；
• 如果元素的内容是动态加载的，记得在内容加载完成后重新调用检测函数；
• 可以给<span>添加title属性，或者结合JS实现自定义悬停弹窗，展示完整文本，进一步提升用户体验。

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