html - 歌词上方的响应和弦

Question

我想使用 HTML 和 CSS(如果真的有必要，一些 JS)来找到一种将和弦放在歌词上方的响应方式。
我已经检查过这个帖子:Styling text to make it appear above the line (for chords above the lyrics)
这是我到目前为止所拥有的:

        body {
          padding:20px;
          font-size: 30px;
        }
        .chord{
            position    : absolute;
            top         : -50px;
            width       : 0;
            font-style  : italic;
            font-weight : bold;
            font-size: 50px;
        }

        .chord-lyrics{
            position: relative;
            display: inline-block;
            margin-top: 50px;
        }

<div class="line">
    <div class="chord-lyrics"><span class="chord">C</span> Imagine</div> there's 
    <div class="chord-lyrics"><span class="chord">Cmaj7</span>no</div>
    <div class="chord-lyrics"><span class="chord">F</span>heaven</div>
</div>

目标:

始终将和弦放在正确的歌词上方

如果屏幕小于该行，则每个单词必须在下一行溢出

如果和弦比下面的文字大，则应在歌词之间留出空间
编辑:

和弦也可以在单词中间

目前，对于 1. 和 2. 一切正常，但对于 3. 则不行，最后一个也非常重要!
谢谢

Answer 1

另一种可能性是使用 Flexbox :

body {
  padding: 20px;
  font-size: 30px;
}

.container {
  max-width: 450px;
}

.line {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.chord-letter {
  display: flex;
  flex-direction: column;
  padding: 0 5px;
  align-items: center; /* center chord */
}

.chord {
  font-style: italic;
  font-weight: bold;
  font-size: 25px;
}

<div class="container">
  <div class="line">
    <div class="chord-letter"><span class="chord">C</span> Imagine</div> there's
    <div class="chord-letter"><span class="chord">Cmaj7</span>no</div>
    <div class="chord-letter"><span class="chord">F</span>heaven</div>
  </div>
</div>

此代码完全响应。如果没有足够的空间，每个和弦文本组合将移动到下一行。
这是一个 Fiddle供你玩。