कुछ CSS गुणों को जोड़कर अपने HTML प्री टैग्स को शीघ्रता से 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 के कारण ठीक लपेटता था। संपत्ति जिसकी हमने अभी चर्चा की है। लेकिन इसे एक लंबे शब्द के रूप में पढ़ा जाता है।
इस समस्या को ठीक करने के लिए, हम प्री टैग में एक और CSS प्रॉपर्टी जोड़ते हैं, जिसे word-break . कहा जाता है , और इसे break-all . का मान दें . इस तरह:
pre {
white-space: pre-wrap;
word-break: break-all;
}अब आपके पूर्व टैग 100% प्रतिक्रियाशील हैं।