为文本设置样式，使其显示在线条上方（适用于歌词上方的和弦） [英] Styling text to make it appear above the line (for chords above the lyrics)

问题描述

我想使用CSS在音乐的歌词上方显示和弦。这是我真的想它看起来像：

  CF 
这行有一个C和弦，它还具有F和弦
  

，使得和弦变化显示在正确的位置。在HTML中它如下所示：

 < span class =chord> C< / span> C和弦，还有一个< span class =chord> F< / span> F chord 
  

$ b b

我设法使用这种造型几乎得到了效果：

  .chord {
 position：relative ; 
 top：-1em; 
} 
  

但问题是它有空白：

  CF 
此行有一个C和弦，它还有一个F和弦
  

如果只有width：0（我将使用overflow：visible）在内联跨度上工作。有人有解决方案吗？

编辑：解决谢谢@Kyle Sevenoaks。对于任何有兴趣的人，这里是我的完整的CSS，它允许经过标记与< p> ，和弦标记与< 以及和弦是否显示为使用父div上的 show-chords 类切换：

$ b b

  p.song span {display：none;} p.song.show-chords p {line-height：2.3em; margin-bottom：2em;} p.song.show-chords span {position：relative; top：-1em; display：inline-block; width：0; overflow：visible; text-shadow：#CCC -1px 1px;颜色：＃00F; font-weight：bold; font-family：Arial，Helvetica，sans-serif;}  

 < p class =song show-chords> < span class =chord> C< / span>此线具有C和弦，并且还具有< span class =chord> F< / span> F chord< / p& code> 
 p> 

解决方案

可以使用 display：inline-block; 让它接受width。但是对于你的问题，为什么不直接添加 left：3px; / * em或任何* / ？它将缩进。

I'd like to be able to show chords above the lyrics in music using CSS. This is what I'd really like it to look like:

C                                           F
This line has a C chord, and it also has an F chord

so that the chord changes are shown in the right places. In HTML it looks like this:

<span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord

And I managed to nearly get the effect with this styling:

.chord {
  position: relative;
  top: -1em;
}

But the problem is that it has gaps:

C                                            F
 This line has a C chord, and it also has an  F chord

If only width:0 (which I would use with overflow:visible) worked on an inline span. Does anyone have a solution?

Edit: Solved thanks to @Kyle Sevenoaks. For anyone who's interested, here's my complete CSS, which allows verses to be marked with <p>, chords to be marked with <span> and whether chords are displayed to be toggled with the show-chords class on the parent div:

p.song span {
  display: none;
}
p.song.show-chords p {
  line-height:2.3em;
  margin-bottom:2em;
}
p.song.show-chords span {
  position: relative;
  top: -1em;
  display:inline-block;
  width: 0;
  overflow:visible;
  text-shadow:#CCC -1px 1px;
  color:#00F;
  font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
}

<p class="song show-chords">
  <span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord
</p>

解决方案

For inline elements, you can use display: inline-block; to have it accept width. But for your problem, why not simply add left: 3px; /*em or whatever*/? It will indent it.

这篇关于为文本设置样式，使其显示在线条上方（适用于歌词上方的和弦）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！