কম্পিউটার টিউটোরিয়াল

HTML DOM Style whiteSpace প্রোপার্টি


পরিচয়

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>

আউটপুট

উপরের কোড নিচের আউটপুটটি উত্পন্ন করবে:

HTML DOM Style whiteSpace প্রোপার্টি

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

HTML DOM Style whiteSpace প্রোপার্টি

  1. HTML DOM Style textDecoration প্রোপার্টি

  2. HTML DOM Style whiteSpace প্রোপার্টি

  3. HTML DOM Style userSelect প্রপার্টি

  4. HTML DOM Style direction প্রপার্টি