Texto-decoracion-saltar-tinta - Trucos CSS

Anonim

text-decoration-skip-inkes una propiedad que controla el comportamiento de underliney overline(pero no line-through) cuando la línea pasa a través de parte de un carácter / glifo. Esto le brinda un control preciso sobre cómo los subrayados o sobrelíneas interactúan con los caracteres que se extienden por encima de la parte superior o cuelgan debajo de la parte inferior de una línea.

Anteriormente, esto se manejaba a través de la text-decoration-skip: ink;combinación propiedad / valor, pero después de discusiones sobre cómo manejar el problema de estilos en cascada que sobrescriben involuntariamente estilos de menor prioridad (debido a la cantidad de opciones disponibles text-decoration-skip), las propiedades individuales se dividirán en nuevas propiedades. similar a text-decoration-skip-ink. Para obtener más contexto y ejemplos de por qué se cambió esto, consulte esta discusión de GitHub y las actas del Grupo de trabajo de CSS que discuten las propiedades.

De forma predeterminada, los navegadores "omitirán" áreas donde la "tinta" de un carácter cruza un subrayado, así:

Puede cambiar este comportamiento para forzar que el subrayado / sobrelineado pase por el carácter estableciendo text-decoration-skip-inken none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Esto da como resultado que la línea atraviese los caracteres:

Sintaxis

text-decoration-skip-ink: auto | none;

Valores

text-decoration-skip-ink acepta los siguientes valores:

  • auto es el valor predeterminado y "saltará" subrayados / sobrelíneas al pasar por un carácter.
  • none cortará ese subrayado / sobrelineado a través de las y colgantes y las t altas.

Ejemplo

Vea el ejemplo
de Pen text-decoration-skip-ink de CSS-Tricks (@ css-tricks) en CodePen.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
91 87 No 88 TP

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 14,0-14,4 *

Relacionado

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Recursos

  • Documentación MDN
  • Aplicar estilo a los subrayados en la Web
  • Usuarios disléxicos y subrayados sin tinta