एक लाइन ब्रेक को HTML एलिमेंट्स में <br> ब्रेक रिटर्न का उपयोग किए बिना जोड़ा जा सकता है, प्स्यूडो-एलिमेंट्स का उपयोग करके। प्स्यूडो-एलिमेंट्स का उपयोग किसी एलिमेंट के विशिष्ट भाग को स्टाइल करने के लिए किया जाता है। यहां हम HTML एलिमेंट को स्टाइल करने के लिए लाइन ब्रेक जोड़ने के लिए ::after का उपयोग करेंगे।
बेसिक उदाहरण
span {
padding: 1px 8px;
}
span::after {
content: '\a'; /* कैरिज रिटर्न */
white-space: pre; /* व्हाइटस्पेस संरक्षित करें */
}
उपरोक्त कोड में, हम प्रत्येक इंलाइन एलिमेंट (span द्वारा दर्शाया गया) पर प्स्यूडो-एलिमेंट ::after का उपयोग करते हैं, ताकि span के टेक्स्ट की लाइन के बाद एक कैरिज रिटर्न ( "\a" द्वारा दर्शाया गया) जोड़ा जा सके। इस मामले में ::after के लिए एक content प्रॉपर्टी और एक व्हाइटस्पेस प्रॉपर्टी उपलब्ध है।
content प्रॉपर्टी उस सामान का वर्णन करती है जिसे हम span में इंजेक्ट करना चाहते हैं। white-space प्रॉपर्टी हमें बताती है कि क्या हम व्हाइटस्पेस को संरक्षित करना चाहते हैं। इस विशेष प्रॉपर्टी को छोड़ने से span की इंलाइन-ब्लॉक विशेषता में हस्तक्षेप नहीं होता। इसलिए हमें उसको ओवरराइड करने के लिए इस विशेष प्रॉपर्टी को जोड़ना होगा।
पैडिंग और बैकग्राउंड के साथ समस्या
जैसे-जैसे आप स्टाइलिंग और लेआउट के साथ अधिक खिलवाड़ करते हैं, आप शायद पाएंगे कि उपरोक्त समाधान आवश्यक रूप से सर्वोत्तम समाधान नहीं है। यदि आप किसी भी प्रकार का पैडिंग और बैकग्राउंड भी जोड़ते हैं, तो आप देखेंगे कि वे CSS प्रॉपर्टीज बैकग्राउंड के आने के स्थान के साथ गड़बड़ करती हैं।
बेहतर समाधान: display: table
ब्लॉक लेवल एलिमेंट्स जैसे <p> या <div> का उपयोग करना एक आकर्षक समाधान है। लेकिन उन समयों के बारे में क्या जब आप एक अलग डिस्प्ले वैल्यू का उपयोग करना चाहेंगे? यह हमें टेबल लेआउट विकल्प पर लाता है।
कोड एडिटर में, span CSS सिलेक्टर में, वहां मौजूद प्रॉपर्टीज को हटाएं और इसे display: table से बदलें। इसका उपयोग न केवल आपके कोड को क्लीनर बनाता है, बल्कि आपको जानकारी प्रदर्शित करने के लिए आवश्यक सटीक लेआउट भी देता है। हम पारंपरिक अर्थ में टेबल लेआउट का उपयोग नहीं कर रहे हैं, लेकिन यह हमें काम पूरा करने के लिए आवश्यक चीज़ देता है।
निष्कर्ष
::after प्स्यूडो-एलिमेंट के साथ content: '\a' और white-space: pre का उपयोग करके <br> टैग के बिना लाइन ब्रेक बनाया जा सकता है। हालांकि, पैडिंग और बैकग्राउंड के साथ बेहतर लेआउट नियंत्रण के लिए, display: table (या display: inline-block उचित आयामों के साथ) अक्सर एक अधिक मजबूत समाधान होता है।
