标签导航：

如何实现网页文字动态省略效果，并保持图标显示正常？

如何在网页上实现文字动态省略效果？

如何通过 CSS 或少量 JS 来实现类似于下图所示的动态文本省略效果？其中，动态内容是一个图标，文本长度变动时也能保持良好的显示状态。

解决方案：

  • 纯 CSS 实现：
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon {
  display: inline-block;
  margin-left: 8px;
}

此方法通过设置 overflow 为 hidden 和 text-overflow 为 ellipsis 来隐藏溢出的文本，但它只适用于文本长度固定的情况。

  • 带少量 JS 的 CSS 实现：
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon {
  display: inline-block;
  margin-left: 8px;
}
// 获取文本节点和图标节点
const textNode = document.querySelector('.ellipsis');
const iconNode = document.querySelector('.icon');

// 监听文本节点的文本内容变化事件
textNode.addEventListener('DOMSubtreeModified', () => {
  // 根据文本内容的长度调整图标的位置
  const textWidth = textNode.offsetWidth;
  iconNode.style.left = `${textWidth + 8}px`;
});

此方法通过监听文本节点的内容变化事件，动态调整图标的位置，从而实现不同文本长度下的正确显示。

参考文章及 demo：

  • CodePen demo：https://codepen.io/xboxyan/pen/PopWVNX
  • 浮动布局实现：https://segmentfault.com/a/1190000040172089