हाइफ़न - सीएसएस-ट्रिक्स

Anonim

hyphensसंपत्ति नियंत्रण ब्लॉक स्तर तत्वों में पाठ का हायफ़नेशन। आप हाइफ़नेशन को बिल्कुल भी होने से रोक सकते हैं, इसकी अनुमति दे सकते हैं या केवल तभी अनुमति दे सकते हैं जब कुछ पात्र मौजूद हों।

ध्यान दें कि hyphensभाषा-संवेदनशील है। ब्रेक के अवसरों को खोजने की इसकी क्षमता भाषा पर निर्भर करती है, langजो मूल तत्व की विशेषता में परिभाषित होती है । सभी भाषाएँ अभी तक समर्थित नहीं हैं, और समर्थन विशिष्ट ब्राउज़र पर निर्भर करता है।

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

p ( hyphens: none | manual | auto )

हाइफ़न: कोई नहीं

शब्दों को लाइन ब्रेक पर कभी हाइफ़न नहीं किया जाता है, भले ही शब्द के अंदर वर्ण सुझाव देते हैं कि हाइफ़नेशन कहाँ जाना चाहिए या जाना चाहिए।

हाइफ़न: मैनुअल

शब्द केवल लाइन ब्रेक पर टूटते हैं जहां शब्द के अंदर वर्ण होते हैं जो लाइन ब्रेक के अवसरों का सुझाव देते हैं। लाइन ब्रेक अवसर का सुझाव देने वाले दो वर्ण हैं:

  • U+2010(HYPHEN): "हार्ड" हाइफ़न वर्ण एक दृश्य रेखा को तोड़ने के अवसर को इंगित करता है। भले ही रेखा वास्तव में उस बिंदु पर टूटी न हो, फिर भी हाइफ़न का प्रतिपादन किया गया है। सचमुच एक "-"।
  • U+00AD(SHY): एक अदृश्य, "नरम" हाइफ़न। यह चरित्र नेत्रहीन रूप से प्रदान नहीं किया गया है; इसके बजाय, यह एक ऐसी जगह का सुझाव देता है जहां ब्राउज़र आवश्यक हो तो शब्द को तोड़ने का विकल्प चुन सकता है। HTML में, आप -सॉफ्ट हाइफ़न डालने के लिए उपयोग कर सकते हैं ।

हाइफ़न: ऑटो

शब्दों को उपयुक्त हाइफ़नेशन बिंदुओं पर तोड़ा जा सकता है, जैसा कि शब्द के अंदर हाइफ़नेशन वर्णों (ऊपर देखें) द्वारा निर्धारित किया गया है या भाषा-उपयुक्त हाइफ़नेशन संसाधन द्वारा स्वचालित रूप से निर्धारित किया गया है (यदि ब्राउज़र द्वारा समर्थित है या इसके द्वारा प्रदान किया गया है @hyphenation-resource)।

किसी शब्द के अंदर सशर्त हाइफ़नेशन वर्ण, यदि मौजूद हो, तो शब्द के भीतर हाइफ़नेशन पॉइंट निर्धारित करते समय स्वचालित संसाधनों पर प्राथमिकता लें।

हाइफ़न: सभी

पदावनत, उपयोग न करें । यह केवल अस्थायी रूप से परीक्षण के लिए कल्पना में था।

डेमो

नीचे दिए गए डेमो में पैराग्राफ का एक गुच्छा है और hyphens: auto;हाइफ़नेशन की अवधारणा को प्रदर्शित करने के लिए सब कुछ निर्धारित है । langविशेषता यह बताने के enमाता पिता तत्व पर।

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

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

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

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
88 6 * 10 * 12 * 5.1 *

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

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

सफारी 5+ की आवश्यकता है -webkit-, फ़ायरफ़ॉक्स 6+ की आवश्यकता है -moz-, आईई 10+ की आवश्यकता है -ms-, आईओएस 4.2+ की आवश्यकता है -webkit-

क्रोम <55 और एंड्रॉइड ब्राउज़र वास्तव में समर्थन करते हैं -webkit-hyphens: none, जो कि डिफ़ॉल्ट मूल्य है, लेकिन अन्य मूल्यों में से कोई भी नहीं।

फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में, स्वचालित हाइफ़नेशन केवल कुछ भाषाओं ( langविशेषता के साथ परिभाषित ) के लिए काम करता है । समर्थित भाषाओं की एक व्यापक सूची के लिए यह नोट देखें।

यदि आप एक वेब-आधारित दस्तावेज़ लिख रहे हैं, जिसे वास्तव में हाइफ़नेशन की आवश्यकता है, तो आप Hyphenator.js का उपयोग कर सकते हैं जो कि एक विशाल शब्दकोश पर आधारित एक पुस्तकालय है जो आपकी सामग्री में स्वचालित रूप से सॉफ्ट हाइफ़न और शून्य-चौड़ाई रिक्त स्थान को इंजेक्ट करेगा।

जावास्क्रिप्ट के बिना, आपको दोनों पर भरोसा करना होगा hyphensऔर word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )