white-space বৈশিষ্ট্য

white-space বৈশিষ্ট্যটি সেট করে পাঠ্যকে কীভাবে নতুন লাইনে মোড়ানো যায়, এবং সেইসাথে শব্দগুলির মধ্যে ফাঁকা স্থান এবং লাইন ব্রেকগুলি কীভাবে প্রদর্শন করা যায় (সেই স্থানগুলি যেখানে কোড টাইপ করার সময় Enter টিপে দেওয়া হয়েছিল)।

সিনট্যাক্স

cssসিলেক্টর {
  white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

মানগুলি

ডিফল্ট মান: normal।

উদাহরণ . nowrap মান

এই উদাহরণে, পাঠ্য কন্টেইনারে ফিট হবে না এবং এর সীমানার বাইরে চলে যাবে, কারণ nowrap মান সেট করা হয়েছে:

html<div id="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

উদাহরণ . nowrap মান এবং br ট্যাগ

যদি br ট্যাগ যোগ করা হয় - পাঠ্য একটি নতুন লাইনে চলে যাবে (ঠিক সেই জায়গায়, যেখানে br রয়েছে):

html<div id="elem">
  Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
}

Результат:

উদাহরণ . pre মান

এই উদাহরণে, পাঠ্য ঠিক সেভাবে দেখানো হয়, যেভাবে HTML কোড এডিটরে টাইপ করা হয়েছিল (সমস্ত Tab কী দিয়ে ইন্ডেন্টেশন, Enter এবং ইত্যাদি সহ):

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre;
  border: 1px solid red;
}

Результат:

উদাহরণ . pre-wrap মান

এবং এখন পাঠ্য ঠিক সেভাবে দেখানো হয় যেভাবে এটি HTML কোড এডিটরে টাইপ করা হয়েছিল, যাইহোক, বাইরে চলে যাওয়া অংশগুলি一个新的 লাইনে নিয়ে যাওয়া হয়:

html<div id="elem">
  Lorem ipsum
  
    dolor sit amet, consectetur adipiscing elitorire.
</div>

css#elem {
  width: 200px;
  white-space: pre-wrap;
  border: 1px solid red;
}

Результат:

আরও দেখুন