HTML etiqueta que afecta altura de la línea, la forma de hacerlo consistente?

Question

Si tengo una etiqueta <sup> en una etiqueta <p> de varias líneas, la línea con el superíndice en él tiene un espaciado de línea más grande por encima de ella que las otras líneas, irregardless de lo line-height pongo en el <p>.

Editar de aclaración : No significa que tenga un montón de <p>s, cada uno de los cuales es en una sola línea. Tengo una sola <p> con suficiente contenido en ella para provocar la envoltura en varias líneas. En algún lugar (cualquier lugar) en el texto que puede haber un <sup> o <sub>. Esto afecta a la altura de la línea para esa línea mediante la adición de espacio extra arriba / abajo. Si fijo de una línea de altura más grande en la <p> esto hace ninguna diferencia para el problema. La línea de altura se incrementa, pero el espacio extra todavía permanece.

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

Sus soluciones deben ser multi-navegador (IE 6+, FF, Safari, Opera, Chrome)

Answer 1

line-height no arreglarlo, pero puede que tenga que hacer que sea bastante grande: en mis setttings tengo que aumentar la línea de altura a aproximadamente 1,8 antes de la <sup> ya no interfiere con ella, pero esto varía de fuente a fuente .

Un enfoque posible para conseguir alturas de línea consistente es establecer su propio estilo superíndice en lugar de la vertical-align: super defecto. Si utiliza top no va a añadir nada a la caja de línea, pero puede que tenga que reducir aún más el tamaño de fuente para que se ajuste:

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

Otro truco que podría intentar es utilizar posicionamiento para moverlo hacia arriba un poco sin afectar a la caja de línea:

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

Por supuesto, esto corre el riesgo de chocar con la línea anterior si no tiene suficiente line-height.

Answer 2

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

El truco es fijar line-height del <sup> a 0. @ Scott dice que el uso normal, pero esto no siempre funciona.

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

Answer 3

Yo tenía el mismo problema y no de las respuestas dadas trabajaron. Pero encontré una href="https://gist.github.com/unruthless/413930"> git con una solución que funcionó para mí:

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

Answer 4

mantenerlo sencillo:

sup { vertical-align: text-top; }

[ tamaño de fuente depende de su tipo de letra individuo]

Answer 5

Yo prefiero usar length en la vertical-align. Esto alinea la línea de base del elemento en la longitud dada por encima de la línea de base de su matriz.

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

Answer 6

La razón por la etiqueta <sup> está afectando a la separación entre dos líneas tiene que ver con una serie de factores. Los factores son: altura de la línea, el tamaño del superíndice en relación con el tipo de letra normal, la altura de la línea del superíndice y por último pero no menos importante lo que es la parte inferior de la alineación con el superíndice ... Si ajusta la altura ... línea de texto normal para estar en una "banda de túnel" (que es lo que yo llamo) del 135%, entonces el texto normal (el 100%) obtiene acolchada blanca en un 35% de más blanca. Para un párrafo esto se parece a esto:

 p
    {
            line-height: 135%;
    }

Si a continuación hace almohadilla blanca no el superíndice ... (es decir, mantener su altura de línea a 0) el superíndice sólo tiene la anchura de su propio texto ... si luego pedir el superíndice a ser un porcentaje de la regularidad la fuente (por ejemplo, 70%) y se alinea con el centro del texto normal (texto-medio), se puede eliminar el problema y obtener un exponente que se ve como un superíndice. Aquí está:

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

Answer 7

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

Answer 8

Para hacer que todas las líneas más alto , que parecen lo mismo en la línea con el superíndice, definir un line-height más grande para todo el párrafo

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

o cualquier valor da el efecto deseado.

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

EDIT:. Con el fin de hacer que todas las líneas tienen el mismo aspecto cuando solamente se necesita más espacio vertical que los demás , todas las líneas del párrafo tendrán que ser más alto

Esto, como ya he dicho, no puede una solución atractiva. Tal vez algo se puede hacer con un lapso de hacer sólo el texto con la sub / superíndice menor , aparte de eso, no creo que lo que quiere se puede lograr. Pero me gustaría ver la solución de otra persona.

Edit2: Por cierto, he intentado un archivo HTML que contiene pequeñas

<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 las líneas son todas la misma altura en FF3.0.14 y Konqueror (no puedo hablar por otros navegadores)

Answer 9

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.

Answer 10

Especialmente en utilizar este boletín -

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

Answer 11

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

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

Answer 12

& sup1, y sup2 etc. puede hacer el truco. se trata de un truco de HTML para superíndice

Answer 13

aquí , trabaja en ambos PhantomJS y en el correo electrónico HTML embebido:

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