Text-decoration-skip - CSS-Tricks

Anonim

W text-decoration-skipobiekcie określa, gdzie podkreślenie tekstu, overline lub strajk przelotowe powinny pęknąć. Poprawia to czytelność ozdobionego tekstu i poprawia gramatykę znaków interpunkcyjnych w niektórych językach.

Oto jeden przykład:

a ( text-decoration-skip: ink; )

Heads-up! inkWartość została zmieniona na zupełnie nowy obiekt, text-decoration-skip-ink: auto;.

Jeśli Twoja przeglądarka obsługuje tę właściwość, zauważysz tutaj, że w dolnej części każdego znaku (np. „Y” i „p”) są małe białe spacje wokół krawędzi:

Zobacz opis Pen text-decoration-skip autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Jeśli Twoja przeglądarka nie obsługuje tej funkcji, tego powinieneś oczekiwać od usługi w obsługującej ją przeglądarce:

ilustracja pomiń tekst dekoracji

text-decoration-skip w OSX i iOS

Pod koniec 2014 roku Apple dokonał zmiany text-decorationw przeglądarkach Safari i iOS, które naśladują sposób, w jaki text-decoration-skip: ink;powinno działać. Chociaż żadna z text-decoration-skipwartości nie została jeszcze oficjalnie zaimplementowana, możesz wyłączyć to domyślne zachowanie za pomocą -webkit-text-decoration-skip: none;.

Zobacz Pen -webkit-text-decoration-skip: none; przez CSS-Tricks (@ css-tricks) na CodePen.

Związane z

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

Więcej informacji

  • Moduł dekoracji tekstu CSS Poziom 4
    Wersja robocza edytora
  • text-decoration-skip w MSDN.
  • Dyskusja o dodawaniu trailing-spaceswartości z listy mailingowej W3C.
  • Poprawa czytelności tekstu dla użytkowników z dysleksją dzięki podkreśleniom typu „skip-ink”
  • text-decoration-skip na MDN
  • text-decoration-skip-ink na MDN

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
91 87 Nie 88 TP

Telefon komórkowy / tablet

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