Question

我尝试在文本上方放置一些文字（用于音乐）：

     Am          E  
This is a new sentence  
     G            C  
This is another sentence

但我不想使用空格！
目前我有这个：

＆＃13;

p {
  position: relative;
  font-size: 50px;
}

span {
  position: absolute;
  bottom: 50px;
  color: red;
  font-size: 20px;
}

＆＃13;

<div>
  <p>Test test test <span>Em</span>test test</p>
  <p>Test <span>Am</span>test test test test</p>
  <p>Test test test test <span>Am</span>test</p>
  <p><span>Am</span>Test test test test test</p>
</div>

＆＃13;

只有当我不碰任何东西（font-size ...）时才有效，因为底部值与font-size值相同。

我希望得到相同的结果但没有那个约束。

你能帮我吗？？

Answer 1

使用top: -1em;将<span>向上移动自己的字体大小，因为EM相对于当前元素的font-size：

＆＃13;

p {
  position: relative;
  font-size: 50px;
}

span {
  position: absolute;
  top: -1em;
  color: red;
  font-size: 20px;
}

＆＃13;

<div>
  <p>Test test test <span>Em</span>test test</p>
  <p>Test <span>Am</span>test test test test</p>
  <p>Test test test test <span>Am</span>test</p>
  <p><span>Am</span>Test test test test test</p>
</div>

＆＃13;

为了在文本换行时保留正确的垂直位置，我还建议在伪元素中显示文本，伪元素位于与span包裹的文本的关系中，而不是段落本身。

＆＃13;

p {
  position: relative;
  font-size: 100px;
}

span {
  position: relative;
}

span::before {
  position: absolute;
  top: -0.5em;
  color: red;
  font-size: 0.4em;
  content: attr(data-text);
}

＆＃13;

<div>
  <p>Test test test <span data-text="Em">test</span> test</p>
  <p>Test <span data-text="Am">test</span> test test test</p>
  <p>Test test test test <span data-text="Am">test</span></p>
  <p><span data-text="Am">Test</span> test test test test</p>
</div>

＆＃13;

位置跨越段落中的文本

1 个答案: