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

从现在开始，我们要努力学习啦！今天我给大家带来《如何实现网页文字动态省略效果，并保持图标显示正常？ 》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

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

如何通过 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

理论要掌握，实操不能落！以上关于《如何实现网页文字动态省略效果，并保持图标显示正常？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！