প্রকাশিত: 11 অক্টোবর, 2024
ক্রোম 130-এ clone মান সহ box-decoration-break সিএসএস প্রপার্টি উপলব্ধ, ইনলাইন এবং ব্লক ফ্র্যাগমেন্টেশনের জন্য সমর্থন সহ। কেন এবং কিভাবে এটি ব্যবহার করবেন এই পোস্টটি ব্যাখ্যা করে।
ইনলাইন ফ্র্যাগমেন্টেশন
ইনলাইন ফ্র্যাগমেন্টেশন হল যখন একটি ইনলাইন উপাদান, যেমন টেক্সটের একটি স্ট্রিং, একাধিক লাইনের উপর ভেঙে যায়। ইনলাইন উপাদানগুলির একটি বাক্স থাকে, যা আপনাকে সাধারণত চিন্তা করতে হবে না, যদি না আপনি উপাদানটিতে একটি পটভূমি বা সীমানা যোগ করার চেষ্টা করেন। নিম্নলিখিত উদাহরণে একটি border-radius সহ একটি পটভূমি একটি স্প্যানে যোগ করা হয়েছে। সীমানা শুধুমাত্র স্ট্রিং শুরু এবং শেষে বক্ররেখা.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
box-decoration-break -এর প্রাথমিক মান হল slice , যা বাক্সগুলিতে এই স্লাইসড প্রভাব দেয়। নতুন সমর্থিত box-decoration-break: clone যদিও, মানে প্রতিটি লাইন গোলাকার সীমানা দিয়ে শুরু এবং শেষ হয়।
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
ব্লক ফ্র্যাগমেন্টেশন
ব্লক ফ্র্যাগমেন্টেশন ঘটবে যদি আপনি একাধিক-কলাম লেআউট সহ কলামে বিষয়বস্তু ভাঙ্গন, অথবা যখন আপনি মুদ্রণ করেন এবং বিষয়বস্তু পৃষ্ঠাগুলিতে বিভক্ত হয়।
নিম্নলিখিত উদাহরণে, বিষয়বস্তু কলামে বিভক্ত, এবং প্রতিটি অনুচ্ছেদের একটি সীমানা রয়েছে। slice প্রারম্ভিক মান সহ বাক্সগুলি কলামের নীচে এবং উপরে কাটা হয়।
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
box-decoration-break: clone , যখন একটি বাক্স খণ্ডিত হয়, প্রতিটি খণ্ড সীমানা দিয়ে মোড়ানো হয়।
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
একই জিনিস ঘটবে যদি আপনার বাক্সগুলিতে সীমানা থাকে যা পৃষ্ঠাটি মুদ্রণের সময় খণ্ডিত হয়। যদি একটি বাক্স দুটি পৃষ্ঠায় বিভক্ত হয়, বাক্সের সীমানাটি প্রথম পৃষ্ঠায় সম্পূর্ণ হবে তারপর দ্বিতীয় পৃষ্ঠায় একটি নতুন বাক্স খুলুন।