পরিচয়
HTML DOM Style whiteSpace প্রোপার্টি একটি HTML ডকুমেন্টে এলিমেন্টের টেক্সটে ট্যাব, লাইন ব্রেক এবং হোয়াইটস্পেস কীভাবে হ্যান্ডেল হবে তা জানতে এবং সেট করতে ব্যবহৃত হয়।
সিনট্যাক্স
মান ফেরত দেওয়া
object.style.whiteSpace
মান সেট করা
object.style.whiteSpace = "value"
প্রাপ্য মানসমূহ
| মান | ব্যাখ্যা |
|---|---|
| initial | এই প্রোপার্টির মান ডিফল্ট মানতে সেট করে। |
| inherit | প্যারেন্ট এলিমেন্ট থেকে এই প্রোপার্টির মান উত্তরাধিকার সূত্রে পায়। |
| normal | হোয়াইটস্পেস সিকোয়েন্স একক হয়ে যাবে এবং টেক্সট জরুরি হলে র্যাপ হবে। |
| nowrap | হোয়াইটস্পেস সিকোয়েন্স একক হয়ে যাবে এবং টেক্সট পরবর্তী লাইনে র্যাপ হবে না। |
| pre | ব্রাউজার হোয়াইটস্পেস সংরক্ষণ করবে এবং টেক্সট শুধু লাইন ব্রেক পেলে র্যাপ হবে। |
| pre-line | হোয়াইটস্পেস সিকোয়েন্স একক হয়ে যাবে এবং টেক্সট জরুরি হলে পরবর্তী লাইনে র্যাপ হবে। |
| pre-wrap | ব্রাউজার হোয়াইটস্পেস সংরক্ষণ করবে এবং টেক্সট জরুরি হলে পরবর্তী লাইনে র্যাপ হবে। |
উদাহরণ
নিচে HTML DOM Style whiteSpace প্রোপার্টির একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html> <html> <head> <style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
border: 2px solid #fff;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style> </head> <body>
<h1>DOM Style whiteSpace Property Example</h1>
<p>
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
function add() {
document.querySelector('p').style.whiteSpace = "pre-line";
}
</script> </body> </html>
আউটপুট
উপরের কোড নিচের আউটপুটটি উত্পন্ন করবে:

"Change whiteSpace" বাটনে ক্লিক করলে প্যারাগ্রাফ এলিমেন্টের হোয়াইটস্পেস হ্যান্ডলিং আচরণ পরিবর্তন হবে:
