लिखाई वाली कई भाषाओं में, शब्दों के साथ-साथ सिलेबल के बीच भी लाइन ब्रेक किया जा सकता है. ऐसा अक्सर इसलिए किया जाता है, ताकि टेक्स्ट की एक लाइन में ज़्यादा वर्ण रखे जा सकें. इससे टेक्स्ट एरिया में लाइन की संख्या कम हो जाती है और जगह बचती है. ऐसी भाषाओं में, ब्रेक को हाइफ़न ('-') के ज़रिए दिखाया जाता है.
सीएसएस टेक्स्ट मॉड्यूल लेवल 3 में हाइफ़न प्रॉपर्टी की जानकारी दी गई है. इससे यह कंट्रोल किया जा सकता है कि उपयोगकर्ताओं को हाइफ़न कब दिखाए जाएं और दिखाए जाने पर उनका व्यवहार कैसा हो. Chrome के 55 वर्शन से, हाइफ़न प्रॉपर्टी लागू की गई है.
स्पेसिफ़िकेशन के मुताबिक, हाइफ़न प्रॉपर्टी की तीन वैल्यू होती हैं: none, manual, और auto. इस बारे में बताने के लिए, हमें सॉफ़्ट हाइफ़न (­) का इस्तेमाल करना होगा, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
सॉफ़्ट हाइफ़न सिर्फ़ तब दिखता है, जब वह टेक्स्ट के आखिरी मार्जिन पर होता है. Chrome 55 या उसके बाद के वर्शन में, हाइफ़न का रेंडर कैसे होगा, यह सीएसएस hypens प्रॉपर्टी की वैल्यू पर निर्भर करता है.
-webkit-hyphens: manual;
hyphens: manual;
इन दोनों को मिलाकर, ऐसा नतीजा मिलता है:
ध्यान दें कि सॉफ़्ट हाइफ़न नहीं दिख रहा है. सभी मामलों में, जब सॉफ़्ट हाइफ़न वाला कोई शब्द एक ही लाइन में फ़िट हो जाता है, तो हाइफ़न नहीं दिखेगा. अब, आइए देखें कि हाइफ़न की तीनों वैल्यू कैसे काम करती हैं.
कोई भी नहीं
पहले उदाहरण में, हाइफ़न प्रॉपर्टी को none पर सेट किया गया है. इससे, सॉफ्ट हाइफ़न कभी भी नहीं दिखता. इसकी पुष्टि करने के लिए, विंडो के साइज़ में बदलाव करें, ताकि 'elit' शब्द, टेक्स्ट की दिखने वाली लाइन में न फ़िट हो.
मैन्युअल का इस्तेमाल करना
दूसरे उदाहरण में, हाइफ़न प्रॉपर्टी को manual पर सेट किया गया है. इसका मतलब है कि सॉफ़्ट हाइफ़न सिर्फ़ तब दिखेगा, जब मार्जिन 'elit' शब्द को तोड़ देगा. विंडो के साइज़ में बदलाव करके, इस बात की पुष्टि की जा सकती है.
ऑटो का इस्तेमाल करना
तीसरे उदाहरण में, हाइफ़न प्रॉपर्टी को auto पर सेट किया गया है. इस मामले में, सॉफ़्ट हाइफ़न की ज़रूरत नहीं होती, क्योंकि उपयोगकर्ता एजेंट अपने-आप हाइफ़न की जगहें तय कर लेगा. विंडो का साइज़ बदलने पर, आपको पता चलेगा कि ब्राउज़र इस उदाहरण में हाइफ़न को उसी जगह पर लगाता है जहां दूसरे उदाहरण में लगाया गया है. हालांकि, इसमें कोई सॉफ़्ट हाइफ़न मौजूद नहीं है. विंडो को छोटा करते रहने पर, आपको दिखेगा कि आपका ब्राउज़र, टेक्स्ट के किसी भी दो सिलेबल के बीच लाइन ब्रेक कर सकता है.