html - 在响应式设计中将两行文本包裹在一起

Question

我怎样才能为响应式设计实现这一目标？

C Cmaj7 F      
想象没有天堂

C Cmaj7 F      
你试试就知道很简单了

C Cmaj7            
想象有
   F
没有天堂

C Cmaj7        
这很容易，如果
    F
你试试

标签： htmlcss

Answer 1

通过包装元素中的每个单词，在本例中为 a 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>