在响应式设计中将两行文字包装在一起

Question

如何为响应式设计实现这一目标？

C       Cmaj7      F      
Imagine there's no heaven 

C         Cmaj7  F      
It's easy if you try 

C       Cmaj7            
Imagine there's 
   F
no heaven 

C         Cmaj7        
It's easy if 
    F
you try 

Answer 1

通过将元素中的每个单词包装起来（在本例中为span），我们可以在开始包装时强制行具有间距。

::before伪元素可用于通过使用content: attr(data-chord);并将其放置在该单词上方来设置任何单词的和弦，从而有效地将其从常规DOM定位中移除。

希望有帮助。

p {
  margin-top: 0;
}

p span {
  display: inline-block;
  padding-top: 1.4em;
}


p span[data-chord] {
  position: relative;
}

p span[data-chord]::before {
  position: absolute;
  bottom: 1.4em;
  content: attr(data-chord);
  font-size: 80%;
}

<p>
  <span data-chord="C">Imagine</span>
  <span data-chord="Cmaj7">there's</span>
  <span>no</span>
  <span data-chord="F">heaven</span>
</p>

<p>
  <span data-chord="C">It's</span>
  <span>easy</span>
  <span data-chord="Cmaj7">if</span>
  <span>you</span>
  <span data-chord="F">try</span>
</p>