কম্পিউটার

এইচটিএমএল ডম স্টাইল হোয়াইটস্পেস সম্পত্তি


HTML DOM শৈলীর হোয়াইটস্পেস প্রপার্টি রিটার্ন করে এবং এইচটিএমএল ডকুমেন্টের একটি এলিমেন্টের একটি পাঠ্যে ট্যাব, লাইন ব্রেক এবং হোয়াইটস্পেস কীভাবে পরিচালনা করতে হয় তা পরিবর্তন করে৷

সিনট্যাক্স

নিচের সিনট্যাক্স −

  • হোয়াইটস্পেস ফেরত দেওয়া হচ্ছে

object.style.whiteSpace
  • হোয়াইটস্পেস পরিবর্তন করা হচ্ছে

object.style.whiteSpace = “value”

মানগুলি

এখানে, মান −

হতে পারে
মান ব্যাখ্যা
প্রাথমিক এটি এই সম্পত্তির মানটিকে তার ডিফল্ট মানতে সেট করে৷
উত্তরাধিকার এটি এর মূল উপাদান থেকে এই সম্পত্তির মান উত্তরাধিকারসূত্রে পায়৷
স্বাভাবিক এতে হোয়াইটস্পেসের ক্রমটি একটি এককটিতে ভেঙে পড়বে এবং প্রয়োজনে পাঠ্যটি মোড়ানো হবে৷
nowrap এতে হোয়াইটস্পেসের ক্রমটি একটি এককটিতে ভেঙে যাবে এবং পাঠ্যটি পরবর্তী লাইনে মোড়ানো হবে না৷
প্রাক এতে সাদা স্থানটি ব্রাউজার দ্বারা সংরক্ষিত থাকে এবং টেক্সটটি কেবল তখনই মোড়ানো হবে যখন একটি লাইন বিরতির সম্মুখীন হবে৷
প্রি-লাইন এতে হোয়াইটস্পেসের ক্রমটি একটি এককটিতে ভেঙে যাবে এবং পাঠ্য শুধুমাত্র প্রয়োজনে পরবর্তী লাইনে মোড়ানো হবে৷
প্রি-র্যাপ এতে হোয়াইটস্পেস ব্রাউজার দ্বারা সংরক্ষিত থাকে এবং টেক্সট শুধুমাত্র প্রয়োজন হলে পরবর্তী লাইনে মোড়ানো হবে৷

উদাহরণ

আসুন HTML DOM স্টাইলের 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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

এইচটিএমএল ডম স্টাইল হোয়াইটস্পেস সম্পত্তি

হোয়াইটস্পেস পরিবর্তন করুন-এ ক্লিক করুন অনুচ্ছেদ উপাদান -

-এর হোয়াইটস্পেসগুলি কীভাবে পরিচালনা করতে হয় তার আচরণ পরিবর্তন করতে বোতাম

এইচটিএমএল ডম স্টাইল হোয়াইটস্পেস সম্পত্তি


  1. এইচটিএমএল ডম স্টাইল টেক্সট ডেকোরেশন প্রপার্টি

  2. এইচটিএমএল ডম স্টাইল হোয়াইটস্পেস সম্পত্তি

  3. এইচটিএমএল ডম স্টাইল ইউজার সিলেক্ট প্রপার্টি

  4. এইচটিএমএল ডম শৈলী দিক বৈশিষ্ট্য