কিছু 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% প্রতিক্রিয়াশীল৷
৷