代码之家 › 专栏 › 技术社区 › Nathan MacInnes

设置文本样式以使其显示在行上方(用于歌词上方的和弦)

css html

Nathan MacInnes · 技术社区 · 14 年前

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

使和弦的变化显示在正确的位置。在HTML中,它看起来像这样:

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

我用这个造型几乎达到了效果:

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

但问题是,它存在差距:

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

如果只有宽度:0(我将使用overflow:visible)处理内联跨距。有人有解决办法吗?

感谢@Kyle Sevenoaks解决了这个问题。对于任何感兴趣的人,这里是我完整的CSS,它允许用 <p> ,和弦标记为 <span> 以及是否显示和弦以便与 show-chords

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>

3 回复 | 直到 9 年前

Kyle 14 年前

对于内联元素,可以使用 display: inline-block; 让它接受宽度。但对于你的问题,为什么不简单地加上 left: 3px; /*em or whatever*/ ? 它会缩进它。

fcalderan fcalderan 14 年前

这里有一个变体使用 data-* :before 伪类

HTML格式:

<span data-chord="C">T</span>his line has a C chord, and it 
also has an <span data-chord="F">F</span> chord

CSS:

span[data-chord]:before {
    position    : relative;
    top         : -1em;
    display     : inline-block;
    content     : attr(data-chord);
    width       : 0;
    font-style  : italic;
    font-weight : bold;
}

http://jsfiddle.net/fcalderan/4wKkp/

Pekka 14 年前

是啊, position: relative

这里有一个解决方案 position: absolute 在相对位置的一个周围跨距,这样空间就不再被保留:

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

CSS:

.chord { position: absolute
 }

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

left 方法是这对任何弦宽都有效(想想 埃苏斯 或 .

here . 在IE6、7、8、铬6中测试

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前