如何在hover时为div内单个单词添加下划线（无需包裹元素）

这个问题问得好！确实，手动给每个单词套<span>太繁琐了，尤其是文本量多或者内容动态生成的场景。可惜的是，目前没有纯CSS方法能直接实现光标悬停在单个单词上就给它加下划线——CSS没法识别文本里的单词边界，也没法把光标位置和特定单词关联起来。

不过我们可以用一小段JavaScript自动完成单词的包裹工作，不用手动修改HTML，效率高很多。思路就是：把目标div里的文本拆分成单词，给每个单词自动套上<span>，再用CSS给<span>:hover加下划线样式。

具体实现代码 #

HTML（和你的原结构几乎一致，只加了一个类名方便选择）

<div class="word-hover-container">aaa, bbb- ccc. eee fff</div>

CSS（核心hover样式）

.word-hover-container span:hover {
  text-decoration: underline;
  /* 可以再加一些自定义样式，比如改变颜色 */
  color: #2563eb;
}

JavaScript（自动包裹单词）

// 获取目标元素
const targetDiv = document.querySelector('.word-hover-container');
// 拆分文本：保留原空格避免布局错乱，拆分后数组包含单词和空格
const textSegments = targetDiv.textContent.split(/(\s+)/);
// 重新组装HTML：只给非空格的内容套span
targetDiv.innerHTML = textSegments.map(segment => {
  if (segment.trim() === '') return segment;
  return `<span>${segment}</span>`;
}).join('');

细节说明 #

• 这里用split(/(\s+)/)拆分文本，是为了保留原有的空格和换行，避免破坏原本的文本布局。拆分后的数组里，会交替出现“单词/标点组合”和“空格”，我们只给非空格的部分套<span>。
• 如果你的单词定义需要更精细（比如要把bbb-里的连字符和单词分开，或者忽略末尾的标点），可以调整正则表达式。比如用/\b(\w+)([,.\-]?)\b/g来匹配单词和紧跟的标点，再单独处理。
• 如果是动态加载的内容（比如AJAX获取的文本），记得在内容加载完成后再执行这段JS代码，确保能正确选中目标元素。

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