HTML <pre> ট্যাগকে ১০০% রেসপন্সিভ করার দ্রুত পদ্ধতি শিখুন।
অনেক টিউটোরিয়াল ওয়েবসাইটে লম্বা কোড স্নিপেট (<pre> ট্যাগে র্যাপ করা) পেজের প্রস্থের বাইরে চলে যায় এবং লেআউট ভাঙায়। কারণ ডিফল্টভাবে pre ট্যাগে white-space: normal থাকে।
সমাধান ১: white-space: pre-wrap
pre { white-space: pre-wrap; }এটি লাইন ব্রেক হ্যান্ডেল করে, কিন্তু ইনডিভিজুয়াল ওয়ার্ড খুব লম্বা হলে (যেমন ডিরেক্টরি পাথ) এখনও ওভারফ্লো করতে পারে।
সমাধান ২: word-break: break-all যোগ করুন
pre { white-space: pre-wrap; word-break: break-all; }এখন <pre> ট্যাগ ১০০% রেসপন্সিভ—লম্বা ওয়ার্ডও ব্রেক होकर নতুন লাইনে যাবে।
উদাহরণ: লম্বা ডিরেক্টরি পাথ
cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.mdস্পেস ছাড়া এই পাথটি ব্রাউজারের কাছে একক লম্বা ওয়ার্ড। word-break: break-all এটি ব্রেক করে দেয়।
