ব্রেক রিটার্ন <br> ব্যবহার না করেই HTML উপাদানে একটি লাইন বিরতি যোগ করা যেতে পারে ছদ্ম-উপাদান ব্যবহার করে। ছদ্ম-উপাদানগুলি একটি উপাদানের একটি নির্দিষ্ট অংশকে স্টাইল করতে ব্যবহৃত হয়। এখানে আমরা ব্যবহার করব ::আফটার স্টাইল করার জন্য একটি HTML এলিমেন্ট একটি লাইন ব্রেক যোগ করতে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>
উপরের কোডে, আমরা ছদ্ম-উপাদান ব্যবহার করি ::after প্রতিটি ইনলাইন উপাদানে (স্প্যান দ্বারা উপস্থাপিত) স্প্যানের পাঠ্যের লাইনের পরে একটি ক্যারেজ রিটার্ন ("\a" দ্বারা উপস্থাপিত) যোগ করতে। ::after এই ক্ষেত্রে একটি বিষয়বস্তু সম্পত্তি এবং একটি সাদা স্থান সম্পত্তি আমাদের ব্যবহারের জন্য উপলব্ধ আছে.
'সামগ্রী' বৈশিষ্ট্য বর্ণনা করে যে আমরা স্প্যানে ইনজেকশন দিতে চাই। হোয়াইট-স্পেস সম্পত্তি আমাদের বলে যে আমরা হোয়াইটস্পেস সংরক্ষণ করতে চাই। এই বিশেষ সম্পত্তিটি বন্ধ রেখে যাওয়া স্প্যানের ইনলাইন-ব্লক বৈশিষ্ট্যে হস্তক্ষেপ করে না। তাই আমরা যে ওভাররাইড করতে এই বিশেষ সম্পত্তি যোগ করতে হবে.
আপনি যত বেশি স্টাইলিং এবং লেআউট নিয়ে গোলমাল করছেন, আপনি সম্ভবত উপরের সমাধানটি সর্বোত্তম সমাধান নয় বলে দেখতে পাবেন। যদি আপনি যেকোন ধরণের প্যাডিং এবং ব্যাকগ্রাউন্ড যোগ করেন, আপনি দেখতে পাবেন যে সেই CSS বৈশিষ্ট্যগুলি যেখানে ব্যাকগ্রাউন্ড কার্যকর হয় তার সাথে তালগোল পাকিয়ে যায়। নীচের কোডের উদাহরণটি দেখুন যা পয়েন্টটি ব্যাখ্যা করে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>
অন্যান্য সমাধান রয়েছে যা এটির অনুরূপ ফলাফল দেয় - যেখানে পটভূমিটি পূর্ববর্তী লাইনে শুরু হয় এবং তারপরে পরবর্তী লাইনে সঠিক পটভূমিতে পাঠ্য সহ একটি ক্যারেজ রিটার্ন করে। CSS প্রপার্টি box decoration break: clone এটি এমন একটি যা মনে আসে যা একটি অনুরূপ ফলাফল অর্জনের জন্য উপরের স্প্যান ক্লাসে যোগ করা যেতে পারে, কিন্তু আমরা যে ফলাফল চাই তা সত্যিই আমাদের দেয় না।
ব্লক লেভেল এলিমেন্ট যেমন <p> ব্যবহার করা অথবা <div> একটি লোভনীয় সমাধান। কিন্তু সেই সময়ে কী হবে যেখানে আপনি আলাদা ডিসপ্লে মান ব্যবহার করতে চান? এটি আমাদের টেবিল লেআউট বিকল্পে নিয়ে আসে।
কোড এডিটরে, স্প্যান সিএসএস সিলেক্টরে, সেখানকার প্রপার্টি মুছে দিন এবং ডিসপ্লে:টেবিল দিয়ে প্রতিস্থাপন করুন। এটি ব্যবহার করা শুধুমাত্র আপনার কোডকে ক্লিনার করে না, কিন্তু তথ্য প্রদর্শনের জন্য আপনার প্রয়োজনীয় লেআউটটি দেয়। আমরা প্রথাগত অর্থে টেবিল লেআউট ব্যবহার করছি না, তবে এটি আমাদের কাজটি সম্পন্ন করার জন্য ঠিক কী প্রয়োজন তা দেয়।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
