Metin dekorasyon-atlama mürekkebi - CSS Hileleri

Anonim

text-decoration-skip-inkbir özelliği olduğunu kontrol davranışı underlineve overline(ancak line-through) çizgi bir karakter / glif kısmı içinden geçtiğinde. Bu, alt çizgilerin veya üst çizgilerin, üste uzanan veya bir satırın altına sarkan karakterlerle nasıl etkileşime girdiği konusunda ince ayarlı kontrol sağlar.

Daha önce bu, text-decoration-skip: ink;özellik / değer kombinasyonu aracılığıyla ele alınmıştı , ancak istemeden düşük öncelikli stillerin üzerine yazma (kullanılabilen seçeneklerin sayısı nedeniyle) basamaklı stil sorununu nasıl ele alacağına ilişkin tartışmalardan sonra text-decoration-skip, bireysel özellikler yeni özelliklere bölünecektir. benzer text-decoration-skip-ink. Bunun neden değiştirildiğine dair daha fazla bağlam ve örnek için, bu GitHub tartışmasına ve özellikleri tartışan CSS Çalışma Grubu tutanaklarına bakın.

Varsayılan olarak, tarayıcılar bir karakterin "mürekkebinin" alt çizgiyle kesiştiği alanları şu şekilde "atlar":

Sen overline ayarlayarak karakteri geçmesi / altı çizili zorlamak için bu davranışı değiştirebilirsiniz text-decoration-skip-inkiçin none.

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

Bu, karakterlerin doğrudan kesilmesine neden olur:

Sözdizimi

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

Değerler

text-decoration-skip-ink aşağıdaki değerleri kabul eder:

  • auto varsayılan değerdir ve bir karakterden geçerken altını çizen / üstünü çizen "atlar".
  • none o alt çizgiyi / üst çizgiyi sarkan y'lerinizden ve uzun t'lerinizden kesecektir.

Misal


CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem metin dekorasyonu-atlama mürekkebi örneğine bakın.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
91 87 Hayır 88 TP

Mobil / Tablet

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

İlişkili

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

Kaynaklar

  • MDN belgeleri
  • Web'de Alt Çizgileri Stil Etme
  • Disleksik kullanıcılar ve altı çizili mürekkep atlama