La etiqueta HTML <sup /> que afecta a la altura de la línea, ¿cómo hacerlo coherente?

Si tengo una <sup>etiqueta en una etiqueta de varias líneas <p>, la línea con el superíndice tiene un espacio de línea más grande por encima de las otras líneas, independientemente de la altura de línea que coloque en la línea <p>.

Editar para aclarar : no quiero decir que tengo muchos <p>s, cada uno de los cuales está en una sola línea. Tengo un single <p>con suficiente contenido para causar el ajuste en varias líneas. En algún lugar (en cualquier lugar) del texto puede haber un <sup>o <sub>. Esto afecta la altura de la línea para esa línea al agregar espacio adicional arriba / abajo. Si establezco una altura de línea más grande en <p>esto, no hay diferencia para el problema. La altura de la línea aumenta, pero aún queda espacio adicional.

¿Cómo puedo hacer que sea coherente, es decir, todas las líneas tienen el mismo espacio si contienen <sup>o no?

Sus soluciones deben ser entre navegadores (IE 6+, FF, safari, opera, chrome)

line-height lo arregla, pero es posible que tenga que hacerlo bastante grande: en mis ajustes tengo que aumentar el alto de línea a aproximadamente 1.8 antes de que <sup>ya no interfiera con él, pero esto variará de una fuente a otra.

Un posible enfoque para obtener alturas de línea consistentes es establecer su propio estilo de superíndice en lugar del predeterminado vertical-align: super. Si lo usa top, no agregará nada al cuadro de línea, pero es posible que deba reducir aún más el tamaño de la fuente para que se ajuste:

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

Otro truco que podrías probar es usar el posicionamiento para moverlo un poco hacia arriba sin afectar el cuadro de línea:

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

Por supuesto, esto corre el riesgo de chocar contra la línea de arriba si no tiene suficiente altura de línea.

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

El truco es establecer el <sup> altura de la línea en 0. Se dice que @Scott usa normal, pero esto no siempre funciona.

Esto significa que no tiene que cambiar la altura de línea del texto circundante para acomodar el texto superíndice. He probado esto en IE7 + y los otros navegadores principales.

Tuve el mismo problema y ninguna de las respuestas dadas funcionó. Pero encontré un git commit con una solución que funcionó para mí:

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

Manténgalo fácil:

sup { vertical-align: text-top; }

[ el tamaño de fuente depende de su tipo de letra individual]

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

Prefiero usar lengthen la alineación vertical. Esto alinea la línea base del elemento en la longitud dada por encima de la línea base de su padre.

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

La razón por la cual la <sup>etiqueta está afectando el espacio entre dos líneas tiene que ver con varios factores. Los factores son: altura de la línea, tamaño del superíndice en relación con la fuente regular, la altura de la línea del superíndice y, por último, pero no menos importante, cuál es la parte inferior del superíndice que se alinea con ... Si establece ... la altura de la línea de texto normal para estar en una "banda de túnel" (eso es lo que yo llamo) del 135%, luego el texto normal (el 100%) se rellena de blanco en un 35% de más blanco. Para un párrafo esto se ve así:

 p
    {
            line-height: 135%;
    }

Si luego no coloca el superíndice en blanco ... (es decir, mantiene la altura de la línea a 0), el superíndice solo tiene el ancho de su propio texto ... si luego le pide al superíndice que sea un porcentaje de la fuente regular (para ejemplo 70%) y si lo alinea con la mitad del texto normal (text-middle), puede eliminar el problema y obtener un superíndice que se parece a un superíndice. Aquí está:

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

Prefiero la solución sugerida aquí , como lo ejemplifica este jsfiddle :

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

La belleza de esta solución es que puede adaptar el posicionamiento vertical del superíndice y el subíndice, para evitar cualquier conflicto con la línea superior o inferior ... en lo anterior, simplemente aumente o disminuya 0.2empara satisfacer sus necesidades.

Para hacer que todas las líneas sean más altas , para que tengan el mismo aspecto que la línea con el superíndice, defina una más grande line-heightpara todo el párrafo

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

o cualquier valor que le dé el efecto que deseas.

Puede parecer extraño, pero así es como describió sus requisitos.

EDITAR: para que todas las líneas se vean iguales cuando solo una necesita más espacio vertical que las otras , TODAS las líneas en el párrafo tendrán que ser más altas.

Esto, como dije, puede que no sea una solución atractiva. Tal vez se pueda hacer algo con un lapso haciendo que solo el texto con el subíndice / superíndice sea más pequeño , aparte de eso, no creo que se pueda lograr lo que desea. Pero me gustaría ver la solución de otra persona.

EDIT2: Por cierto, he probado un pequeño archivo html que contiene

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

Y todas las líneas tienen la misma altura en FF3.0.14 y Konqueror (no puedo hablar por otros navegadores)

He estado usando line-height: normal para el superíndice, que funciona bien para mí en Safari, Chrome y Firefox, pero no estoy seguro acerca de IE.

Use esto especialmente en el boletín informativo -

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

Me gusta la solución de Milingu Kilu pero con el mismo espíritu prefiero

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

& sup1, & sup2, etc. podrían ser útiles. es un truco HTML para superíndice

Responda desde aquí , funciona tanto en phantomjs como en HTML incorporado por correo electrónico:

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