পseudo-এলিমেন্ট ব্যবহার করে HTML এলিমেন্টে লাইন ব্রেক যোগ করা সম্ভব, <br> ট্যাগ ব্যবহার না করেও। এখানে আমরা ::after pseudo-এলিমেন্ট ব্যবহার করব।
::after ব্যবহার করে লাইন ব্রেক
span {
padding: 1px 8px;
}
span::after {
content: '\a'; /* ক্যারেজ রিটার্ন */
white-space: pre; /* হোয়াইটস্পেস সংরক্ষণ */
}
এই কোডে প্রতিটি ইনলাইন এলিমেন্ট (span) এর পরে ক্যারেজ রিটার্ন (\a) যোগ করা হয়েছে। white-space: pre প্রপার্টি হোয়াইটস্পেস সংরক্ষণ করতে বাধ্য করে।
প্যাডিং এবং ব্যাকগ্রাউন্ডের সমস্যা
যদি প্যাডিং এবং ব্যাকগ্রাউন্ড যোগ করা হয়, তবে ক্যারেজ রিটার্নের সময় ব্যাকগ্রাউন্ড সঠিকভাবে কাজ নাও করতে পারে। সমাধান হিসেবে box-decoration-break: clone ব্যবহার করা যেতে পারে, তবে সেটিও পূর্ণ সমাধান নয়।
বेहতর সমাধান: display: table
স্প্যান এলিমেন্টে display: table ব্যবহার করলে কোডও ক্লিন হয় এবং লে আউট সঠিক হয়। এটি টেবিল লে আউটের পারम्पরিক ব্যবহার নয়, কিন্তু আমাদের প্রয়োজনীয় ফলাফল দেয়।
span {
display: table;
padding: 1px 8px;
background: pink;
}
উপসংহার
display: table ব্যবহার করা ::after pseudo-এলিমেন্টের চেয়ে daha स्वচ্ছ এবং কার্যকর সমাধান। এটি ইনলাইন এলিমেন্টকে ব্লক-লেভেল আচরণ করতে বাধ্য করে zonder লে আউট ভাঙাতে।
