CSS hyphens प्रॉपर्टी के साथ टेक्स्ट में हाइफ़न जोड़ना

परिचय

CSS hyphens प्रॉपर्टी का उपयोग करके, हम निर्दिष्ट कर सकते हैं कि टेक्स्ट में हाइफ़न कैसे जोड़े जाएं। यह संकीर्ण कंटेनरों या जस्टिफाइड टेक्स्ट में टेक्स्ट रैपिंग में सुधार के लिए विशेष रूप से उपयोगी है।

उदाहरण 1: मैनुअल बनाम कोई हाइफ़न नहीं

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 20%;
      border: 2px groove lime;
      margin: 10px;
      padding: 10px;
      hyphens: none;
      -webkit-hyphens: none;
      -ms-hyphens: none;
    }
    div:last-of-type {
      hyphens: manual;
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
    }
  </style>
</head>
<body>
  <div> abcdefghi­jklmnopqrstuvwxyz </div>
  <div> abcdefghi­jklmnopqrstuvwxyz </div>
</body>
</html>

उदाहरण 2: ऑटोमैटिक हाइफ़नेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 10px;
      padding: 10px;
      width: 15%;
      border: 2px ridge darkblue;
      background-color: peachpuff;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }
  </style>
</head>
<body>
  <div> abcdefghijklmno-pqrstuvw-xyz </div>
  <div> abcdefghi-jklmnopqrstuvw-xyz </div>
</body>
</html>

हाइफ़न्स प्रॉपर्टी मान

महत्वपूर्ण विचार

• भाषा विशेषता आवश्यक: auto के लिए काम करने के लिए, एलिमेंट या उसके पूर्वजों में वैध lang विशेषता होनी चाहिए (जैसे <html lang="en">)
• ब्राउज़र सपोर्ट: सभी मॉडर्न ब्राउज़र सपोर्ट करते हैं; वेबकिट/ब्लिंक के लिए -webkit-hyphens और IE/एज लिगेसी के लिए -ms-hyphens की आवश्यकता होती है
• शब्दकोश-आधारित: ऑटो हाइफ़नेशन भाषा-विशिष्ट शब्दकोशों का उपयोग करता है; गुणवत्ता भाषा के अनुसार भिन्न होती है
• सॉफ्ट हाइफ़न: मैनुअल ब्रेक पॉइंट्स के लिए ­ (सॉफ्ट हाइफ़न) या &hyph; का उपयोग करें

व्यावहारिक उदाहरण: रिस्पॉन्सिव आर्टिकल लेआउट

<!DOCTYPE html>
<html lang="hi">
<head>
  <style>
    article {
      max-width: 600px;
      margin: 2rem auto;
      padding: 1rem;
      line-height: 1.6;
      hyphens: auto;
      -webkit-hyphens: auto;
      text-align: justify;
    }
    @media (max-width: 400px) {
      article {
        hyphens: auto;
        word-break: break-word; /* फॉलबैक */
      }
    }
  </style>
</head>
<body>
  <article>
    <h1>हाइफ़नेशन के साथ रिस्पॉन्सिव टाइपोग्राफी</h1>
    <p>लंबे शब्द जैसे "अनंतिमकरणीयतावाद" या "इलेक्ट्रोएन्सेफेलोग्राफी" संकीर्ण स्क्रीन पर लेआउट समस्याएं पैदा कर सकते हैं। उचित हाइफ़नेशन पठनीयता बनाए रखता है।</p>
  </article>
</body>
</html>