HTML <sup /> -Tag, das die Zeilenhöhe beeinflusst. Wie kann es konsistent gemacht werden?

Wenn ich ein <sup>Tag in einem mehrzeiligen <p>Tag habe, hat die hochgestellte Zeile einen größeren Zeilenabstand darüber als die anderen Zeilen, unabhängig davon, welche Zeilenhöhe ich auf die gesetzt habe <p>.

Zur Verdeutlichung bearbeiten : Ich meine nicht, dass ich viele <p>s habe, die sich jeweils in einer einzelnen Zeile befinden. Ich habe eine Single <p>mit genügend Inhalten, um mehrere Zeilen zu umbrechen. Irgendwo (irgendwo) im Text kann es ein <sup>oder geben <sub>. Dies wirkt sich auf die Linienhöhe für diese Linie aus, indem ein zusätzlicher Abstand über / unter hinzugefügt wird. Wenn ich eine größere Zeilenhöhe einstelle, <p>macht dies keinen Unterschied für das Problem. Die Zeilenhöhe wird erhöht, der zusätzliche Abstand bleibt jedoch bestehen.

Wie kann ich es konsistent machen - dh alle Zeilen haben den gleichen Abstand, unabhängig davon, ob sie ein enthalten <sup>oder nicht?

Ihre Lösungen müssen browserübergreifend sein (IE 6+, FF, Safari, Oper, Chrome).

Die Zeilenhöhe behebt das Problem, aber Sie müssen es möglicherweise ziemlich groß machen: Bei meinen Einstellungen muss ich die Zeilenhöhe auf etwa 1,8 erhöhen, bevor sie <sup>nicht mehr beeinträchtigt wird. Dies variiert jedoch von Schriftart zu Schriftart.

Ein möglicher Ansatz, um konsistente Linienhöhen zu erzielen, besteht darin, anstelle der Standardeinstellung ein eigenes hochgestelltes Styling festzulegen vertical-align: super. Wenn Sie es verwenden top, wird dem Zeilenfeld nichts hinzugefügt, aber Sie müssen möglicherweise die Schriftgröße weiter reduzieren, damit es passt:

sup { vertical-align: top; font-size: 0.6em; }

Ein weiterer Hack, den Sie versuchen könnten, besteht darin, die Positionierung zu verwenden, um sie ein wenig nach oben zu verschieben, ohne das Zeilenfeld zu beeinträchtigen:

sup { vertical-align: top; position: relative; top: -0.5em; }

Dies birgt natürlich die Gefahr, dass Sie in die darüber liegende Linie stürzen, wenn Sie nicht genügend Linienhöhe haben.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

Der Trick besteht darin, die <sup>Zeilenhöhe des S auf 0 zu setzen. @Scott soll normal verwenden, aber das funktioniert nicht immer.

Dies bedeutet, dass Sie die Zeilenhöhe des umgebenden Textes nicht ändern müssen , um den hochgestellten Text aufzunehmen. Ich habe dies in IE7 + und den anderen gängigen Browsern getestet.

Ich hatte das gleiche Problem und keine der gegebenen Antworten funktionierte. Aber ich habe ein Git-Commit mit einem Fix gefunden, der für mich funktioniert hat:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

halte es einfach:

sup { vertical-align: text-top; }

[ Schriftgröße abhängig von Ihrer individuellen Schrift]

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Ich bevorzuge lengthdie vertikale Ausrichtung. Dadurch wird die Grundlinie des Elements auf die angegebene Länge über der Grundlinie seines übergeordneten Elements ausgerichtet.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Der Grund, warum das <sup>Tag den Abstand zwischen zwei Zeilen beeinflusst, hängt mit einer Reihe von Faktoren zusammen. Die Faktoren sind: Zeilenhöhe, Größe des hochgestellten Zeichens im Verhältnis zur regulären Schriftart, Zeilenhöhe des hochgestellten Zeichens und nicht zuletzt, wie der untere Rand des hochgestellten Zeichens mit ... Wenn Sie ... die Zeilenhöhe einstellen von regulärem Text in einem "Tunnelband" (so nenne ich es) von 135%, dann wird regulärer Text (100%) weiß gepolstert mit 35% mehr Weiß. Für einen Absatz sieht das so aus:

 p
    {
            line-height: 135%;
    }

Wenn Sie dann den hochgestellten Text nicht weiß auffüllen ... (dh die Zeilenhöhe auf 0 halten), hat der hochgestellte Text nur die Breite seines eigenen Textes ... wenn Sie dann den hochgestellten Index bitten, ein Prozentsatz der regulären Schriftart zu sein (z Beispiel 70%) und wenn Sie es an der Mitte des regulären Textes (Text-Mitte) ausrichten, können Sie das Problem beseitigen und einen hochgestellten Index erhalten, der wie ein hochgestellter Text aussieht. Hier ist es:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Ich bevorzuge die hier vorgeschlagene Lösung , wie diese jsfiddle veranschaulicht :

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

Das Schöne an dieser Lösung ist, dass Sie die vertikale Positionierung von hochgestelltem und tiefgestelltem Index 0.2emanpassen können, um Konflikte mit der darüber oder darunter liegenden Linie zu vermeiden .

Um alle Zeilen größer zu machen und mit der hochgestellten Zeile gleich auszusehen, definieren Sie eine größere Zeile line-heightfür den gesamten Absatz

<p style='line-height:150%'>

oder welcher Wert auch immer den gewünschten Effekt ergibt.

Es mag seltsam aussehen, aber so haben Sie Ihre Anforderungen beschrieben.

BEARBEITEN: Damit alle Zeilen gleich aussehen, wenn nur eine mehr vertikalen Raum benötigt als die anderen , müssen ALLE Zeilen im Absatz höher sein.

Dies ist, wie gesagt, möglicherweise keine attraktive Lösung. Vielleicht kann etwas mit einer Spanne gemacht werden, die nur den Text mit dem hochgestellten / hochgestellten Text verkleinert . Abgesehen davon glaube ich nicht, dass das, was Sie wollen, erreicht werden kann. Aber ich würde gerne die Lösung eines anderen sehen.

EDIT2: Übrigens habe ich eine kleine HTML-Datei ausprobiert, die enthält

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

Und die Linien sind in FF3.0.14 und Konqueror alle gleich hoch (ich kann nicht für andere Browser sprechen)

Ich habe die Zeilenhöhe verwendet: Normal für das hochgestellte Zeichen, was für mich in Safari, Chrome und Firefox gut funktioniert, aber ich bin mir über den Internet Explorer nicht sicher.

Verwenden Sie dies speziell für Newsletter -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Ich mag die Lösung von Milingu Kilu, aber in dem Geist, den ich bevorzuge

sup { vertical-align:top; line-height:100%; }

& sup1, & sup2 usw. könnten den Trick machen. Es ist ein hochgestellter HTML-Trick

Antwort von hier , funktioniert sowohl in Phantomjs als auch in E-Mail-eingebettetem HTML:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>