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

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

সিনট্যাক্স

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

মানগুলি

মান	বর্ণনা
`nowrap`	পাঠ্যকে অন্য লাইনে মোড়ানো থেকে নিষেধ করে, এমনকি যদি এটি কন্টেইনারের প্রস্থে ফিট না হয় (এই ক্ষেত্রে পাঠ্য কেবল এর সীমানার বাইরে চলে যাবে)। যাইহোক, `br` ট্যাগ যোগ করা পাঠ্যকে একটি নতুন লাইনে নিয়ে যাবে।
`pre`	পাঠ্য ঠিক সেভাবে দেখানো হয় যেভাবে এটি ওয়েবসাইট কোডিং করার সময় নোটপ্যাডে টাইপ করা হয়েছিল: সমস্ত ফাঁকা স্থান এবং এন্টার সহ (যদি কোডে একাধিক স্পেস টাইপ করা হয় - স্ক্রীনেও একাধিক থাকবে)। এক্ষেত্রে ব্রাউজার পাঠ্যকে একটি নতুন লাইনে মোড়াবে না, যদি এটি কন্টেইনারে ফিট না হয় - পাঠ্য কেবল এর সীমানার বাইরে চলে যাবে। pre ট্যাগ-এর সমতুল্য, কিন্তু এর থেকে ভিন্ন之处 হলো এটি ফন্টকে মনোস্পেসে পরিবর্তন করে না (মনোস্পেস ফন্ট সম্পর্কে আরও জানতে দেখুন `font-family` বৈশিষ্ট্য)।
`pre-wrap`	pre-এর মতো একই, পার্থক্য হলো যদি পাঠ্য খুব দীর্ঘ হয় এবং কন্টেইনারে না ঢোকে - ব্রাউজার এটিকে অন্য লাইনে নিয়ে যাবে।
`pre-line`	ব্রাউজার শুধুমাত্র HTML কোডে Enter-গুলি বিবেচনা করে এবং বাকি সবকিছু উপেক্ষা করে (একাধিক স্পেস একটি হিসাবে প্রদর্শিত হবে, ব্রাউজার নিজেই লাইন ব্রেক সেট করে)।
`normal`	স্ট্যান্ডার্ড আচরণ: ব্রাউজার নিজেই লাইন ব্রেক সেট করে যাতে শব্দগুলি কন্টেইনারে ফিট হয়। কোডে একাধিক স্পেস স্ক্রিনে একটি হিসাবে প্রদর্শিত হবে।

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

উদাহরণ . nowrap মান

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

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

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

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

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

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

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

উদাহরণ . pre মান

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

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

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

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

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

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

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

আরও দেখুন

word-break এবং overflow-wrap বৈশিষ্ট্যগুলি,
যা একটি দীর্ঘ শব্দের বর্ণগুলিকে একটি নতুন লাইনে নিয়ে যাওয়ার অনুমতি দেয়
tab-size বৈশিষ্ট্য,
যা Tab কী দ্বারা তৈরি ইন্ডেন্টেশনের আকার সেট করে
hyphens বৈশিষ্ট্য,
যা সিলেবল দ্বারা শব্দ বিভাজন সক্ষম করে
overflow বৈশিষ্ট্য,
যা ব্লকের সীমানার বাইরে চলে যাওয়া অংশগুলি কেটে দেয়
pre ট্যাগ,
যা পাঠ্যকে সেভাবে দেখায় যেভাবে এটি HTML কোড এডিটরে টাইপ করা হয়েছিল