如何在单词内嵌入span标签且换行时不拆分单词？

我懂你现在的烦恼——把和弦嵌入单词中间后，换行时单词直接被拆成两半，完全破坏了歌词的可读性。这其实是因为浏览器把拆分后的文本片段和和弦<span>当成了独立的行内元素，自动换行时会在这些元素之间随意断开。

这里给你一个简单有效的解决方案，既能保留和弦在单词内的精确定位，又能确保整词换行不拆分：

步骤1：调整HTML结构 #

把包含和弦的整个单词包裹在一个容器<span>里，让浏览器把它识别成一个不可拆分的整体：

<div class="line">
  <span class="line-text">
    Hello this is a line that wraps with a 
    <span class="word-with-chord">brok<span class="chord">C#</span>en</span> word.
  </span>
</div>

步骤2：修改CSS样式 #

通过CSS让这个单词容器保持整体不拆分，同时调整和弦的定位，让它完美显示在单词上方：

/* 和弦样式：绝对定位在单词上方，不干扰歌词排版 */
.chord {
  position: absolute;
  top: -18px; /* 可根据实际需求调整距离，确保和弦不遮挡歌词 */
  color: blue;
  white-space: pre;
}

/* 带和弦的单词容器：强制整词不拆分 */
.word-with-chord {
  position: relative; /* 让和弦的绝对定位相对于这个容器 */
  white-space: nowrap; /* 告诉浏览器不要在容器内部换行 */
}

.line {
  min-height: 34px; /* 留出和弦的垂直空间，避免和弦与上下行歌词重叠 */
  width: 285px;
  margin: 8px 0; /* 增加行间距，提升整体可读性 */
}

.line-text {
  vertical-align: bottom;
}

方案原理 #

• white-space: nowrap 让整个带和弦的单词容器成为一个整体，浏览器不会在容器内部的文本或和弦元素之间换行；
• position: relative + absolute 组合让和弦精准悬浮在目标单词上方，既保持了和弦与单词的对应关系，又不会打乱歌词的正常排版；
• 调整.line的min-height，避免和弦与上下行的歌词重叠，保证整体排版整洁。

你也可以用display: inline-block替代white-space: nowrap，效果完全一致——把单词容器设为行内块元素后，浏览器会自动把它当成一个整体处理，不会拆分换行：

.word-with-chord {
  display: inline-block;
  position: relative;
}

这样修改后，歌词换行时就会保持整词完整，同时和弦的位置也能精准对应到目标单词上啦！

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