Andrés Bullock
si tengo un <sup>
elemento en un párrafo de varias líneas, la línea con el superíndice tiene un espacio entre líneas más grande que las otras líneas, independientemente de la altura de línea que coloque en el párrafo.
No significa que tenga muchos párrafos, cada uno en una sola línea. Tengo un solo párrafo con suficiente contenido para causar que se ajuste en varias líneas. En algún lugar (cualquier lugar) en el 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 configuro una altura de línea más grande en el párrafo, esto no hace ninguna diferencia en el problema. La altura de la línea aumenta, pero el espacio adicional aún permanece.
¿Cómo puedo hacerlo consistente, es decir, todas las líneas tienen el mismo espaciado si contienen un <sup>
¿O no?
Sus soluciones deben ser multinavegador (IE 6+, Firefox, Safari, Opera, Chrome)
line-height lo soluciona, pero es posible que tengas que hacerlo bastante grande: en mi configuración, tengo que aumentar line-height a aproximadamente 1.8 antes de que el <sup>
ya no interfiere 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 utiliza 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 quepa:
sup { vertical-align: top; font-size: 0.6em; }
Otro truco que podrías intentar 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 con la línea de arriba si no tiene suficiente altura de línea.
-
vertical-align lo arregló, gracias. Incluso una altura de línea masiva de más del 300% no lo soluciona en IE8, Chrome 3 o FF 3.5. Todavía obtengo 1-2px de diferencia.
– Andrew Bullock
7 de octubre de 2009 a las 10:44
-
Como se mencionó, esto no siempre funciona si la altura de la línea es demasiado estrecha.
– Rico
11 de abril de 2012 a las 9:40
-
@simPod: Misma situación,
vertical-align: bottom
(aunque eso no te convence tanto comotop
) y luegoposition:relative;
con un positivotop
.– bobince
21 mayo 2012 a las 22:02
-
en realidad, preferiría {vertical-align: super} porque evita algunos fallos de visualización con la altura de línea en IE8, por lo que recuerdo. Intentaría no usar el posicionamiento con demasiada frecuencia si hay mejores alternativas. Un posicionamiento superior descuidado puede dar lugar a problemas en cascada más adelante en el proyecto.
– Todos los bits son iguales
5 de diciembre de 2013 a las 7:08
-
tamaño de fuente: 0.75em
– 1,21 gigavatios
5 de junio de 2022 a las 2:47
rico
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>
‘s line-height a 0. @Scott dijo que usara normal, pero esto no siempre funciona.
Esto significa tu no tienes que cambiar la altura de línea del texto circundante para acomodar el texto en superíndice. He probado esto en IE7+ y los otros navegadores principales.
-
+1. Como se ha señalado, esto evita conflictos con los otros
line-height
atributos Todavía puede causar intersecciones con la línea anterior si el totalline-height
se establece en pequeño, por supuesto.– Chris Kricho
4 mayo 2013 a las 19:47
-
Fantástica solución, ¡hace que el cromo ya no se porte mal! La respuesta más simple todavía.
– Aktau
8 de agosto de 2013 a las 9:44
-
Acabo de darme cuenta de que esto afectará las alturas de línea no predeterminadas del texto circundante. Usar
line-height: 100%
en este caso.– Matthias Hauert
26 de marzo de 2014 a las 15:16
-
Esto funciona perfectamente. Además, los posibles valores de
line-height
He encontrado que es 0, 1, 1em y 100%. Todos estos ciertamente funcionan en Chrome y Firefox.– ClarkeyBoy
27 de julio de 2015 a las 13:51
-
También prefiero esta respuesta para mi caso de uso: esta respuesta funciona en correos electrónicos en Gmail, la respuesta aceptada no. stackoverflow.com/questions/21118072/…
– Mshnik
12 abr 2018 a las 0:00
Tuve el mismo problema y ninguna de las respuestas dadas funcionó. Pero encontré un git cometer 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; }
[font-size dependent on your individual type-face]
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 conflictos con la línea de arriba o de abajo… en lo de arriba, simplemente aumente o disminuya el 0.2em
para satisfacer sus necesidades.
anuppuri
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
Ópalo
La razón por la cual el <sup>
etiqueta está afectando el espacio entre dos líneas tiene que ver con una serie de factores. Los factores son: la altura de la línea, el tamaño del superíndice en relación con la fuente normal, la altura de la línea del superíndice y, por último, pero no menos importante, con qué se alinea la parte inferior del superíndice… Si configura… la altura de la línea de texto regular para estar en una “banda de túnel” (así es como lo llamo) de 135%, entonces el texto regular (el 100%) se rellena con blanco con un 35% de más blanco. Para un párrafo esto se ve así:
p
{
line-height: 135%;
}
Si luego no rellena el superíndice con blanco… (es decir, mantiene la altura de la línea en 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 normal (por ejemplo, ejemplo 70%) y lo alinea con el medio del texto normal (text-middle), puede eliminar el problema y obtener un superíndice que parece un superíndice. Aquí lo tienes:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}