HTML/CSS实现歌词上方响应式和弦 解决多余空白排版问题

纯CSS+极少量JS即可满足全部要求，核心逻辑是用绝对定位让和弦脱离横向排版流避免撑开歌词，用隐形零高占位防止和弦重叠，完全保留原生文本流的换行特性。 #

实现代码 #

CSS样式 #

body {
  padding: 20px;
  font-size: 30px;
  line-height: 1.8;
}
/* 歌词行：普通块级容器，保留原生文本换行特性 */
.chord-line {
  width: 100%;
}
/* 和弦绑定单元：行内块，和文本流自然融合 */
.chord-unit {
  position: relative;
  display: inline-block;
  white-space: pre;
}
/* 和弦本体：绝对定位到歌词上方，不占用横向排版空间 */
.chord {
  position: absolute;
  left: 0;
  bottom: 100%;
  color: #666;
  font-style: italic;
  font-weight: bold;
  font-size: 0.8em;
  white-space: nowrap;
}
/* 隐形占位：零高度，宽度和对应和弦一致，防止和弦重叠 */
.chord-placeholder {
  display: inline-block;
  width: var(--chord-width);
  height: 0;
  visibility: hidden;
}

HTML结构 #

直接在需要插入和弦的位置拆分文本，包裹和弦单元即可，支持单词中间插入和弦：

<div class="chord-line">
  Ima<span class="chord-unit">
    <span class="chord-placeholder"></span>
    <span class="chord">Csus4</span>gine
  </span> there's 
  <span class="chord-unit">
    <span class="chord-placeholder"></span>
    <span class="chord">Cmaj7</span>no
  </span> 
  <span class="chord-unit">
    <span class="chord-placeholder"></span>
    <span class="chord">F</span>heaven
  </span> 
  Ima<span class="chord-unit">
    <span class="chord-placeholder"></span>
    <span class="chord">C</span>gine
  </span>
</div>

初始化JS（可选，不想用JS可手动给每个.chord-unit设置--chord-width变量值） #

// 页面加载、字体加载完成后执行一次即可
const initChordWidth = () => {
  document.querySelectorAll('.chord-unit').forEach(unit => {
    const chord = unit.querySelector('.chord');
    unit.style.setProperty('--chord-width', `${chord.offsetWidth}px`);
  });
};
window.addEventListener('load', initChordWidth);
document.fonts.ready.then(initChordWidth);
// 响应式场景下如果和弦字号随视口变化，加下面这行即可
window.addEventListener('resize', initChordWidth);

要求匹配说明 #

• 和弦对齐准确：和弦相对于绑定单元左边缘绝对定位，和对应歌词起始位置完全重合
• 自动换行：基于原生文本流实现，宽度不足时自动在单词/空格边界换行，不会拆断完整单词
• 无多余歌词间距：和弦本身脱离横向排版流，不会撑开歌词空隙，仅占位元素占用和弦本身所需的最小宽度
• 支持单词中间标注：只需在和弦插入位置拆分单词，前后文本自然拼接，不需要额外样式控制
• 和弦无重叠：零高占位宽度与和弦完全一致，会自动将后续内容推到不重叠的位置，即使和弦长度远大于对应歌词片段

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