Texto-decoracion-saltar - Trucos CSS

Tabla de contenido

La text-decoration-skippropiedad especifica dónde debe interrumpirse un texto subrayado, superpuesto o tachado. Esto mejora la legibilidad del texto decorado y corrige la gramática de la puntuación en algunos idiomas.

He aquí un ejemplo:

a ( text-decoration-skip: ink; )

¡Aviso! El inkvalor se ha cambiado a una nueva propiedad, text-decoration-skip-ink: auto;.

Si su navegador admite esta propiedad, notará aquí que los descendientes de cada carácter (como "y" y "p") tienen pequeños espacios en blanco alrededor del borde:

Vea el salto de decoración de texto del lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Si su navegador no es compatible con esta función, esto es lo que debe esperar de la propiedad en un navegador compatible:

Ilustración de salto de decoración de texto

text-decoration-skip en OSX e iOS

A finales de 2014, Apple realizó un cambio text-decorationen los navegadores Safari e iOS que imita cómo text-decoration-skip: ink;debería funcionar. Aunque ninguno de los text-decoration-skipvalores se ha implementado oficialmente todavía, puede desactivar este comportamiento predeterminado con -webkit-text-decoration-skip: none;.

Vea el Pen -webkit-text-decoration-skip: none; por CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

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

Más información


  • Borrador del editor de nivel 4 del módulo de decoración de texto CSS
  • text-decoration-skip en MSDN.
  • Discusión sobre agregar trailing-spacescomo valor de la lista de correo del W3C.
  • Mejora de la legibilidad del texto para usuarios disléxicos con subrayado de tinta.
  • Saltar decoración de texto en MDN
  • texto-decoración-saltar-tinta en MDN

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 *

Articulos interesantes...