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

Anonim

text-decoration-lineसंपत्ति एक रेखांकन, overline, लाइन के माध्यम से, या उन पंक्तियों के संयोजन के साथ पाठ से सजाया गया।

p ( text-decoration-line: underline; )

मूल्यों

  • none: कोई रेखा नहीं जोड़ी जाती है, और किसी भी मौजूदा लाइनों को हटा दिया जाता है - उदाहरण के लिए noneलिंक पर डिफ़ॉल्ट अंडरलाइन को हटा देता है।
  • underline: पाठ के नीचे एक 1px को जोड़ता है।
  • overline: पाठ के ऊपर एक 1px ओवरलाइन जोड़ता है।
  • line-through: पाठ के माध्यम से 1px लाइन जोड़ता है।
  • inherit: माता-पिता की सजावट विरासत में मिली।

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

संयुक्त मूल्य

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

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

प्रयोग

text-decoration-lineसंपत्ति व्यावहारिक रूप से मूल के समान है text-decorationसंपत्ति। यदि आप सभी अपने पाठ में एक पंक्ति या रेखाएँ जोड़ना चाहते हैं, text-decorationतो एक बेहतर विकल्प है क्योंकि यह हर ब्राउज़र, यहां तक ​​कि बहुत पुराने लोगों द्वारा समर्थित है। आम तौर पर, एक text-decoration-lineघोषणा का उपयोग केवल तभी समझ में आता है जब आप एक लंबी शैली नियम लिख रहे होते हैं जिसमें शामिल होता है text-decoration-styleया एक text-decoration-colorघोषणा। यदि आप तीनों का एक साथ उपयोग करना चाहते हैं, तो आप आशुलिपि text-decorationसंपत्ति का उपयोग कर सकते हैं।

आशुलिपि

text-decoration-lineके साथ संयोजन में text-decoration-styleऔर text-decoration-colorआशुलिपि CSS3 text-decorationसंपत्ति में इस्तेमाल किया जा सकता है (वर्तमान में केवल फ़ायरफ़ॉक्स पूरी तरह से इस का समर्थन करता है):

.underlined ( text-decoration: underline dotted red; )

डेमो

यह डेमो सफ़ारी, फ़ायरफ़ॉक्स और क्रोम में प्रयोगात्मक वेब प्लेटफ़ॉर्म सक्षम सुविधाओं के साथ काम करेगा। blinkमूल्य शामिल नहीं है।

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

सम्बंधित

  • text-decoration
  • पाठ-सजावट-शैली
  • पाठ-सजावट-रंग
  • टेक्स्ट-डेकोरेशन-स्किप

अधिक जानकारी

  • text-decoration-line W3C कल्पना में
  • text-decoration-line एमडीएन में

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

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
31 * † 7.1 * 6 ‡ कोई नहीं कोई नहीं कोई नहीं 8 *

* साथ -webkitउपसर्ग
† प्रयोगात्मक वेब प्लेटफ़ॉर्म ध्वज सक्षम सुविधाओं के साथ
‡ 6 - 35 के साथ -mozउपसर्ग, 36 के रूप में बिना उपसर्ग।