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

Anonim

text-decorationसंपत्ति एक रेखांकन, overline, लाइन के माध्यम से, या चयनित पाठ करने के लिए लाइनों का एक संयोजन कहते हैं।

h3 ( text-decoration: underline; )

मूल्यों

  • none: कोई रेखा नहीं खींची जाती है, और किसी भी मौजूदा सजावट को हटा दिया जाता है।
  • underline: इसके आधार रेखा पर पाठ में 1px की रेखा खींचता है।
  • line-through: अपने "मध्य" बिंदु पर पाठ में 1px रेखा खींचता है।
  • overline: पाठ में 1px रेखा खींचता है, सीधे उसके "शीर्ष" बिंदु के ऊपर।
  • inherit: माता-पिता की सजावट विरासत में मिली।

blinkमूल्य W3C कल्पना में है, लेकिन यह अब मान्य नहीं है और किसी भी वर्तमान ब्राउज़र में काम नहीं करेगा। जब यह काम किया, तो यह 0% और 100% अस्पष्टता के बीच तेजी से टॉगल करके पाठ को "ब्लिंक" कर दिया।

डेमो

पेन सीएसएस-ट्रिक्स देखें: कोडपेन पर सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा टेक्स्ट सजावट।

उपयोग नोट्स

आप को जोड़ सकते हैं underline, overlineया line-throughएक से अधिक सजावट लाइनों को जोड़ने के लिए एक अंतरिक्ष अलग की गई सूची में मान:

p ( text-decoration: overline underline line-through; )

डिफ़ॉल्ट रूप से, रेखा या रेखाएं पाठ के रंग को अपनी colorसंपत्ति के अनुसार निर्धारित करती हैं। आप इसे ब्राउज़र में बदल सकते हैं जो text-decoration-colorसंपत्ति या तीन-मूल्य की शॉर्टहैंड संपत्ति का समर्थन करते हैं।

text-decoration आशुलिपि संपत्ति के रूप में

text-decorationके साथ संयोजन में इस्तेमाल किया जा सकता text-decoration-styleहै और text-decoration-colorएक आशुलिपि संपत्ति के रूप में:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

वर्तमान में केवल फ़ायरफ़ॉक्स इस उपसर्ग का समर्थन करता है। सफारी इसे -webkitउपसर्ग के साथ समर्थन करता है । Chrome -webkitको Chrome फ़्लैग में सक्षम उपसर्ग और प्रयोगात्मक वेब प्लेटफ़ॉर्म सुविधाएँ भी चाहिए।

सम्बंधित

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

अधिक जानकारी

  • W3C कल्पना सीएसएस पाठ सजावट मॉड्यूल स्तर 3 सीआर में एक आशुलिपि संपत्ति के रूप में पाठ-सजावट
  • एमडीएन में पाठ-सजावट

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

सभी ब्राउज़र CSS2.1 "longhand" संपत्ति का समर्थन करते हैं text-decoration। शॉर्टहैंड संपत्ति और उप-गुण text-decoration-color, text-decoration-lineऔर text-decoration-styleफ़ायरफ़ॉक्स में उपसर्ग समर्थित हैं, और -webkitसफारी में उपसर्ग के साथ । Chrome उन मानों को भी पहचान लेगा, जो -webkitउपसर्ग और प्रायोगिक वेब प्लेटफ़ॉर्म ध्वज सक्षम हैं।

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

डेस्कटॉप

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

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

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

* उपसर्ग के text-decorationसाथ पूरी तरह से समर्थित, उप-गुण -webkit।
† उप-संपत्तियों में अतिरिक्त रूप से प्रयोगात्मक वेब प्लेटफॉर्म की आवश्यकता होती है, जो ध्वज सक्षम हैं।
‡ CSS2.1 text-decorationकेवल; उप-गुण समर्थित नहीं हैं।