Testo-decorazione-salta-inchiostro - Trucchi CSS

Anonim

text-decoration-skip-inkè una proprietà che controlla il comportamento di underlineand overline(ma non line-through) quando la linea passa attraverso una parte di un carattere / glifo. Ciò ti offre un controllo preciso su come le sottolineature o le sovratensioni interagiscono con i caratteri che si estendono sopra la parte superiore o si bloccano sotto la parte inferiore di una riga.

In precedenza questo veniva gestito tramite la text-decoration-skip: ink;combinazione proprietà / valore, ma dopo le discussioni su come gestire il problema degli stili a cascata sovrascrivendo involontariamente gli stili con priorità inferiore (a causa del numero di opzioni disponibili text-decoration-skip), le singole proprietà saranno suddivise in nuove proprietà simile a text-decoration-skip-ink. Per più contesto ed esempi sul motivo per cui è stato modificato, vedere questa discussione su GitHub e i verbali del gruppo di lavoro CSS che discutono le proprietà.

Per impostazione predefinita, i browser "salteranno" le aree in cui l '"inchiostro" di un carattere attraversa una sottolineatura, in questo modo:

È possibile modificare questo comportamento per forzare la sottolineatura / overline a passare attraverso il carattere impostando text-decoration-skip-inksu none.

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

Ciò si traduce nella linea che attraversa i caratteri:

Sintassi

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

Valori

text-decoration-skip-ink accetta i seguenti valori:

  • auto è il valore predefinito e "salterà" le sottolineature / le sovratensioni quando si passa attraverso un carattere.
  • none taglierà quella sottolineatura / sovratensione proprio attraverso le y pendenti e le t alte.

Esempio

Vedi l'esempio Pen text-decoration-skip-ink
di CSS-Tricks (@ css-tricks) su CodePen.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
91 87 No 88 TP

Mobile / Tablet

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

Relazionato

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

Risorse

  • Documentazione MDN
  • Stile delle sottolineature sul Web
  • Utenti dislessici e sottolineature con inchiostro saltato