Teks-hiasan-langkau-dakwat - Trik CSS

Anonim

text-decoration-skip-inkadalah harta yang mengawal tingkah laku underlinedan overline(tetapi tidak line-through) ketika garis melewati bahagian watak / glif. Ini memberi anda kawalan yang lebih baik mengenai bagaimana garis bawah atau garis besar berinteraksi dengan watak-watak yang memanjang di atas bahagian atas atau menggantung di bawah garis bawah.

Sebelumnya ini ditangani melalui text-decoration-skip: ink;gabungan sifat / nilai, tetapi setelah perbincangan mengenai bagaimana menangani masalah gaya cascading yang tidak sengaja menimpa gaya keutamaan yang lebih rendah (kerana jumlah pilihan yang ada text-decoration-skip), sifat individu akan dipecah menjadi sifat baru serupa dengan text-decoration-skip-ink. Untuk lebih banyak konteks dan contoh mengapa ini diubah, lihat perbincangan GitHub ini dan minit Kumpulan Kerja CSS membincangkan hartanah.

Secara lalai, penyemak imbas akan "melangkau" kawasan di mana "dakwat" watak melintasi garis bawah, seperti:

Anda boleh mengubah tingkah laku ini untuk memaksa garis bawah / garis besar untuk melalui watak dengan menetapkan text-decoration-skip-inkke none.

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

Ini menghasilkan pemotongan garis melalui watak-watak:

Sintaks

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

Nilai

text-decoration-skip-ink menerima nilai berikut:

  • auto adalah nilai lalai dan akan "melangkau" garis bawah / garis bawah ketika melewati watak.
  • none akan memotong garis bawah / garis bawah itu tepat melalui tali y anda yang menggantung dan tinggi.

Contohnya

Lihat contoh teks-hiasan-langkau-tinta Pen
oleh CSS-Tricks (@ css-tricks) di CodePen.

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
91 87 Tidak 88 TP

Mudah Alih / Tablet

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

Berkaitan

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

Sumber

  • Dokumentasi MDN
  • Garis Panduan Gaya di Web
  • Pengguna disleksia dan garis bawah dakwat