पाठ-सजावट-छोड़ें - सीएसएस-ट्रिक्स

Anonim

text-decoration-skipसंपत्ति निर्दिष्ट जहां एक पाठ रेखांकन, overline, या हड़ताल के माध्यम से तोड़ने चाहिए। यह सजाए गए पाठ की विरासत को बेहतर बनाता है और कुछ भाषाओं के लिए विराम चिह्न व्याकरण को सही करता है।

यहाँ एक उदाहरण है:

a ( text-decoration-skip: ink; )

सचेत! inkमूल्य, पूरी तरह से नया संपत्ति को बदल दिया गया है text-decoration-skip-ink: auto;

यदि आपका ब्राउज़र इस संपत्ति का समर्थन करता है, तो आप यहां देखेंगे कि प्रत्येक वर्ण (जैसे "y" और "p") के अवरोही सीमा के आस-पास बहुत कम सफेद स्थान हैं:

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

यदि आपका ब्राउज़र इस सुविधा का समर्थन नहीं करता है, तो यह वह है जो आपको एक सहायक ब्राउज़र में संपत्ति से उम्मीद करनी चाहिए:

टेक्स्ट-डेकोरेशन-स्किप इलस्ट्रेशन

text-decoration-skip OSX और iOS में

2014 के उत्तरार्ध में, Apple ने text-decorationSafari और iOS ब्राउज़र में एक बदलाव किया कि कैसे text-decoration-skip: ink;काम करना चाहिए। हालाँकि कोई भी text-decoration-skipमान अभी तक आधिकारिक रूप से लागू नहीं हुआ है, आप इस डिफ़ॉल्ट व्यवहार को अक्षम कर सकते हैं -webkit-text-decoration-skip: none;

पेन -webkit- पाठ-सजावट-छोड़ें देखें: कोई नहीं; CodePen पर CSS-Tricks (@ css-tricks) द्वारा।

सम्बंधित

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

अधिक जानकारी

  • सीएसएस पाठ सजावट मॉड्यूल स्तर 4
    संपादक का मसौदा
  • text-decoration-skip MSDN पर।
  • trailing-spacesW3C मेलिंग सूची से एक मूल्य के रूप में जोड़ने की चर्चा ।
  • स्किप-इंक अंडरलाइन के साथ डिस्लेक्सिक उपयोगकर्ताओं के लिए पाठ पठनीयता में सुधार
  • एमडीएन पर टेक्स्ट-डेकोरेशन-स्किप
  • एमडीएन पर टेक्स्ट-डेकोरेशन-स्किप-इंक

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

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

डेस्कटॉप

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

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

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