decoración de texto en varios tamaños de fuente en Mozilla Firefox
Tengo tal situación (problema visible solo en Mozilla Firefox):
<span style="text-decoration: underline;">
SomeText
<span style="font-size: 50pt">Bigger</span>
SomeText
</span>
<br/>
<span style="font-size: 50pt;">
<span style="text-decoration: underline">Bigger</span>
</span>
como puede ver, el subrayado debajo de la palabra "Más grande" en la primera línea es más delgado que el subrayado en la segunda línea. Quiero hacer algo así: (pero no quiero cambiar HTML, solo CSS)
<span style="text-decoration: underline;">SomeText</span>
<span style="text-decoration: underline;font-size: 50pt;">Bigger</span>
<span style="text-decoration: underline;">SomeText</span>
He intentado hacer eso usando text-decoration: inherit:
<span style="text-decoration: underline;">
SomeText
<span style="font-size: 50pt;text-decoration: inherit;">Bigger</span>
SomeText
</span>
pero ahora tengo dos subrayados... Entonces, ¿cómo puedo hacer eso? Gracias por la ayuda.
PD. Estoy usando Mozilla Firefox
Mostrar la mejor respuesta
Publicado : 1 April, 2018 @ 11:27
Parece que no se puede reproducir tu problema en Chrome.
Publicado : 1 April, 2018 @ 11:29
Publicado : 1 April, 2018 @ 11:30
Publicado : 1 April, 2018 @ 11:31
Publicado : 1 April, 2018 @ 11:33
Entonces, @Marvin, ¿puedes ayudarme a solucionar ese problema en Mozilla Firefox?
Publicado : 1 April, 2018 @ 11:36
Convierta el tramo interior en un bloque en línea. Consulte esta respuesta para obtener una explicación.
.underline-all {
text-decoration: underline;
}
.underline-all * {
display:inline-block;
text-decoration: underline;
}
<span class="underline-all">
SomeText
<span style="font-size: 50pt">Bigger</span>
SomeText
</span>
Publicado : 1 April, 2018 @ 11:58
Muchas gracias. Eso es exactamente lo que quiero decir.
Publicado : 1 April, 2018 @ 12:00
De nada. Tenga en cuenta que el resultado se comporta de manera diferente al original, si el intervalo interno contiene varias palabras que pueden ajustarse al final de una línea.
Publicado : 1 April, 2018 @ 12:02
¿Pero qué quieres decir? ¿Podrías hacer un ejemplo?
Publicado : 1 April, 2018 @ 12:05
Claro, consulta esta respuesta para ver un ejemplo de las diferencias. inline pasa a la siguiente línea cuando hay más palabras de las que caben en la línea anterior, inline-block no se ajusta así sino que usa toda la línea siguiente para sí mismo.
Publicado : 1 April, 2018 @ 12:14
