Formatieren von Text, damit er oberhalb der Linie erscheint (für Akkorde über dem Liedtext)

Question

Ich möchte in der Lage sein, Akkorde über dem Text in der Musik mit CSS anzuzeigen. So würde ich gerne aussehen:

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

so dass die Akkordwechsel an den richtigen Stellen angezeigt werden. In HTML sieht es wie folgt aus:

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

Und ich schaffte es fast, um den Effekt mit diesem Styling zu erhalten:

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

Aber das Problem ist, dass es Lücken hat:

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

Wenn nur width: 0 (was ich mit overflow: visible verwenden würde) arbeitete an einer Inline-Spanne. Hat jemand eine Lösung?

Bearbeiten: Gelöst dank @Kyle Sevenoaks. Für jeden, der interessiert ist, hier ist meine komplette CSS, die Verse mit <p> markiert werden können, Akkorde mit <span> markiert werden und ob Akkorde werden in Schritten mit der show-chords Klasse auf dem übergeordneten div umgeschaltet werden:

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>

Answer 1

Für Inline-Elemente können Sie display: inline-block; verwenden, um Breite zu akzeptieren. Aber für Ihr Problem, warum nicht einfach left: 3px; /*em or whatever*/ hinzufügen? Es wird es einrücken.

Answer 2

Ja, position: relative reserviert immer noch den Platzbedarf.

Hier ist eine Lösung, die eine position: absolute Spanne um den relativ positioniert man wickelt, so dass der Raum nicht mehr reserviert bekommt:

<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;} 

Der Vorteil gegenüber der left Ansatz ist, dass dies für jede Akkordbreite funktioniert (denken Sie Esus oder F7.

JSFiddle here. Getestet in IE6,7,8, Chrome 6

Answer 3

Hier ist eine Variante data-* Attribute und :before Pseudo

HTML verwenden:

<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/