HTML DOM স্টাইল পেজব্রেকইনসাইড প্রপার্টি এইচটিএমএল ডকুমেন্টে একটি এইচটিএমএল উপাদানের ভিতরে প্রিন্টিং বা প্রিন্ট প্রিভিউ করার জন্য পেজ-ব্রেক আচরণ ফিরিয়ে দেয় এবং পরিবর্তন করে।
সিনট্যাক্স
নিম্নলিখিত সিনট্যাক্স −
1. পেজব্রেকইনসাইডে ফিরে আসা
object.pageBreakInside
2. পেজব্রেকইনসাইড পরিবর্তন করা হচ্ছে
object.pageBreakInside = “value”
এখানে, মান −
হতে পারে| মান | ব্যাখ্যা |
|---|---|
| প্রাথমিক | এটি এই সম্পত্তির মানকে তার ডিফল্ট মান সেট করে। |
| উত্তরাধিকার | এটি তার মূল উপাদান থেকে এই সম্পত্তির মান উত্তরাধিকারসূত্রে পায়। |
| স্বয়ংক্রিয় | প্রয়োজনে এটি একটি HTML নথিতে উপাদানের ভিতরে একটি পৃষ্ঠা বিরতি সন্নিবেশিত করে৷ |
| এড়িয়ে চলুন | এটি একটি HTML নথিতে উপাদানের ভিতরে একটি পৃষ্ঠা বিরতি এড়ায় |
আসুন HTML DOM স্টাইল পেজব্রেকইনসাইড প্রপার্টি -
-এর একটি উদাহরণ দেখিউদাহরণ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
p {
text-align: center;
}
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakInside Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Set Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
function set() {
document.querySelector(".page-break").style.pageBreakInside = "avoid";
}
</script>
</body>
</html> আউটপুট
এখন প্রিন্ট প্রিভিউ খুলুন এবং দেখুন কিভাবে আমাদের html পৃষ্ঠা প্রদর্শিত হবে। এবং তারপর নথিতে পৃষ্ঠা-ব্রেক আচরণ এড়াতে লাল বোতামে ক্লিক করুন −
