Teks-dekorasi-lewati-tinta - Trik CSS

Anonim

text-decoration-skip-inkadalah properti yang mengontrol perilaku underlinedan overline(tetapi tidak line-through) ketika garis melewati bagian dari karakter / mesin terbang. Ini memberi Anda kontrol yang tepat atas bagaimana garis bawah atau garis atas berinteraksi dengan karakter yang meluas di atas atau menggantung di bawah garis bawah.

Sebelumnya ini ditangani melalui text-decoration-skip: ink;kombinasi properti / nilai, tetapi setelah diskusi tentang cara menangani masalah gaya berjenjang yang secara tidak sengaja menimpa gaya berprioritas rendah (karena jumlah opsi yang tersedia text-decoration-skip), properti individu akan dipecah menjadi properti baru mirip dengan text-decoration-skip-ink. Untuk lebih banyak konteks dan contoh mengapa ini diubah, lihat diskusi GitHub ini dan menit Kelompok Kerja CSS membahas properti.

Secara default, browser akan "melewati" area di mana "tinta" dari sebuah karakter melintasi garis bawah, seperti:

Anda dapat mengubah perilaku ini untuk memaksa garis bawah / overline untuk pergi melalui karakter dengan menetapkan text-decoration-skip-inkuntuk none.

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

Ini menghasilkan garis memotong tepat melalui karakter:

Sintaksis

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

Nilai

text-decoration-skip-ink menerima nilai-nilai berikut:

  • auto adalah nilai default dan akan "melewati" garis bawah / garis atas saat melewati sebuah karakter.
  • none akan memotong garis bawah / garis atas itu tepat melalui y yang menggantung dan t tinggi.

Contoh

Lihat contoh Pen text-decoration-skip-ink
oleh CSS-Tricks (@ css-trick) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
91 87 Tidak 88 TP

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

Terkait

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

Sumber daya

  • Dokumentasi MDN
  • Styling Garis Bawah di Web
  • Pengguna disleksia dan garis bawah lewati tinta