कुछ CSS प्रॉपर्टीज़ जोड़कर अपने HTML pre टैग्स को 100% रिस्पॉन्सिव बनाने का त्वरित तरीका सीखें।
एक समस्या जो मैं अक्सर अन्य ट्यूटोरियल वेबसाइट्स पर देखता हूं वह यह है कि लंबे कोड स्निपेट्स (जो pre टैग्स द्वारा लपेटे जाते हैं) पेज की चौड़ाई से बाहर निकल जाते हैं, और उनके पेज लेआउट को तोड़ देते हैं।
ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से pre टैग्स में CSS white-space प्रॉपर्टी normal पर सेट होती है, जैसे:
pre { white-space: normal; }समस्या को ठीक करने के लिए आप बस normal को pre-wrap में बदलते हैं:
pre { white-space: pre-wrap; }यह एक बड़ा सुधार है, लेकिन यह ओवरफ्लो समस्या को पूरी तरह से हल नहीं करता है, क्योंकि pre-wrap केवल कोड की पूरी लाइन्स को संबोधित करता है (एक लाइन पर कोड टर्म्स का संग्रह, व्हाइट स्पेस द्वारा अलग)।
क्या होगा यदि आपके कोड लाइन्स में अलग-अलग शब्द इतने लंबे हैं कि वे आपके पेज की चौड़ाई से आगे निकल जाते हैं?
तब आपका लेआउट अभी भी टूट जाता है, क्योंकि pre-wrap व्यक्तिगत शब्दों को संबोधित नहीं करता है।
एक अच्छा उदाहरण एक डायरेक्टरी पथ है, जो आसानी से 50 कैरेक्टर्स से अधिक लंबा हो सकता है, जो कई लेआउट्स के लिए बहुत चौड़ा है, विशेष रूप से मोबाइल पर। यहां मेरे अपने कंप्यूटर से एक उदाहरण है:
cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.mdक्योंकि ऊपर की लाइन में शब्दों के बीच कोई व्हाइट स्पेस नहीं है, इसे आपके ब्राउज़र द्वारा एक लंबे शब्द के रूप में पढ़ा जाता है। यदि इसे प्रत्येक शब्द के बीच स्पेस से अलग किया गया होता, तो यह pre-wrap प्रॉपर्टी के कारण ठीक से रैप हो जाता जिसकी हमने अभी चर्चा की। लेकिन इसे एक लंबे शब्द के रूप में पढ़ा जाता है।
इस समस्या को ठीक करने के लिए, हम pre टैग में एक और CSS प्रॉपर्टी जोड़ते हैं, जिसे word-break कहा जाता है, और इसे break-all मान देते हैं। जैसे:
pre { white-space: pre-wrap; word-break: break-all; }अब आपके pre टैग्स 100% रिस्पॉन्सिव हैं।
