शब्द-रिक्ति - सीएसएस-ट्रिक्स

Anonim

word-spacingसंपत्ति के समान है letter-spacingहालांकि स्वाभाविक रूप से इसके उपयोग टेक्स्ट का एक हिस्सा है, न कि अलग-अलग पात्रों में शब्दों के बीच स्थान की मात्रा को नियंत्रित करता है,।

p ( word-spacing: 2em; )

word-spacing तीन अलग-अलग मूल्य प्राप्त कर सकते हैं:

  1. "सामान्य" कीवर्ड, जो डिफ़ॉल्ट रिक्ति को रीसेट करता है
  2. किसी भी CSS इकाइयों (सबसे आम तौर पर px, em, रेम) का उपयोग करके लंबाई मान
  3. "विरासत" कीवर्ड, जो word-spacingमूल तत्व पर लागू होता है

इस समय सबसे अच्छा अभ्यास का उपयोग करना होगा em। फ़ॉन्ट आकार को समायोजित किया जा सकता है, इसलिए इसके लिए पिक्सेल का उपयोग करने से शब्दों के बीच रिक्ति में समस्याएं हो सकती हैं, जैसा कि उनके आकार ने नहीं किया। remआमतौर पर बहुत अच्छा होता है, लेकिन ब्राउज़र का समर्थन कम होता है और इस उपयोग के मामले में यह संभवतः सबसे अच्छा रिक्ति है जो सीधे उन शब्दों के लिए प्रासंगिक है जिन्हें इसे लागू किया जा रहा है, रूट नहीं।

यह ध्यान रखना महत्वपूर्ण है कि इस संदर्भ में "शब्द" वास्तव में इनलाइन सामग्री के एक विलक्षण टुकड़े को संदर्भित करता है-जिसका अर्थ है कि तत्वों के साथ-साथ तत्वों को भी word-spacingप्रभावित करता है । इस उदाहरण में, कई ऐसे तत्वों को उनके मूल कंटेनर में सेट करके रखा गया है :inline-blockinlineword-spacing

इस पेन को देखें!

ब्याज के अंक

  • word-spacingसंपत्ति सीएसएस संक्रमण के साथ animatable है।
  • स्पेसिंग निर्धारित करने के लिए "प्रतिशत" मान के उपयोग की अनुमति के अनुसार, यह अप्रत्याशित परिणाम दे सकता है - अक्सर बस कोई प्रभाव नहीं पड़ता है।
  • इनलाइन ब्लॉक तत्वों के बीच अंतरिक्ष के खिलाफ लड़ने के तरीकों में से एक शून्य के लिए व्हाइट-स्पेस सेट करना है।

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

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
काम करता है काम करता है काम करता है काम करता है काम करता है अधिकांश काम करता है

एंड्रॉइड ब्राउज़र समर्थन पर एक नोट: अधिकांश एंड्रॉइड डिवाइस समर्थन word-spacingकरते हैं-किसी भी तरह, गैर-ऐप्पल बिल्ड का उपयोग करने वाले कुछ डिवाइस वेबकिट या नेटफ्रंट ब्राउज़र का उपयोग नहीं करते हैं। ऊपर दिए गए QuirksMode लिंक में विवरण विस्तृत हैं।