पाठ-सजावट-स्किप-स्याही - सीएसएस-ट्रिक्स

Anonim

text-decoration-skip-inkएक संपत्ति है जो ( underlineऔर overlineनहीं line-through) के व्यवहार को नियंत्रित करती है जब रेखा एक चरित्र / ग्लिफ़ के हिस्से से गुजरती है। यह आपको इस बात पर ठीक-ठीक नियंत्रण देता है कि कैसे रेखांकित या अतिरेक उन पात्रों के साथ बातचीत करता है जो ऊपर की ओर विस्तार करते हैं या एक रेखा के नीचे लटकाते हैं।

पहले इसे text-decoration-skip: ink;संपत्ति / मूल्य संयोजन के माध्यम से संभाला गया था , लेकिन कैस्केडिंग शैलियों की समस्या को अनजाने में कम-प्राथमिकता वाली शैलियों (उपलब्ध विकल्पों की संख्या के कारण text-decoration-skip) से निपटने के तरीके के बारे में चर्चा करने के बाद , व्यक्तिगत गुणों को नए गुणों से तोड़ा जाएगा। के समान text-decoration-skip-ink। इसे क्यों बदला गया था, इसके लिए अधिक संदर्भ और उदाहरणों के लिए, इस GitHub चर्चा और गुणों पर चर्चा करते हुए CSS कार्य समूह मिनट देखें।

डिफ़ॉल्ट रूप से, ब्राउज़र ऐसे क्षेत्रों को "छोड़" देगा जहां किसी वर्ण का "स्याही" एक रेखांकन पार करता है, जैसे:

आप इस व्यवहार को बदल सकते हैं ताकि सेटिंग के माध्यम से चरित्र के माध्यम से जाने के लिए अंडरलाइन / ओवरलाइन को मजबूर किया जा text-decoration-skip-inkसके none।

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

यह पात्रों के माध्यम से सही रेखा को काटता है:

वाक्य - विन्यास

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

मूल्यों

text-decoration-skip-ink निम्नलिखित मूल्यों को स्वीकार करता है:

  • auto डिफ़ॉल्ट मान है और किसी वर्ण से गुजरने पर रेखांकित / ओवरलाइन को "स्किप" करेगा।
  • none आपके झूलने y और लम्बे टी के माध्यम से उस अंडरलाइन / ओवरलाइन को काट देगा।

उदाहरण


CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन टेक्स्ट-डेकोरेशन-स्किप-इंक उदाहरण देखें।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
91 87 नहीं न 88 टी.पी.

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 14.0-14.4 *

सम्बंधित

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

साधन

  • MDN प्रलेखन
  • स्टाइलिंग वेब पर रेखांकित करता है
  • डिस्लेक्सिक उपयोगकर्ता और स्किप-इंक रेखांकित करते हैं