সিএসএস white-space প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| white-space | ১.০ | ৪.০ | ৩.৫ | ৩.০ | ৯.৫ |
সংজ্ঞা ও ব্যবহার
একটি এলিমেন্টের ভিতর কিভাবে white-space নিয়ন্ত্রন করবেন white-space প্রোপার্টি তা নির্ধারণ করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| normal | হ্যাঁ | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
white-space: normal/nowrap/pre/pre-line/pre-wrap/initial/inherit;
<p> এলিমেন্টের লেখা কখনোই ভাঁজ(wrap) হবে নাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
এটি কিছু টেক্সট। এটি কিছু টেক্সট। এটি কিছু টেক্সট।
</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.whiteSpace="nowrap"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#syntax {
width: 400px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<p> এই ডিভ এলিমেন্টের লেখাগুলো কখনোই ভাজঁ(wrap) হবে না।এটি দেখতে "ক্লিক করি" বাটনে ক্লিক করি:</p>
<button onclick="myFunction()">ক্লিক করি </button>
<div id="syntax">স্যাট একাডেমী বাংলাদেশের একটি বৃহত্তম অনলাইন/অফলাইন ফ্রী আইটি একাডেমী।স্যাট একাডেমী বাংলাদেশের একটি
বৃহত্তম অনলাইন/অফলাইন ফ্রী আইটি একাডেমী।স্যাট একাডেমী বাংলাদেশের একটি বৃহত্তম অনলাইন/অফলাইন ফ্রী আইটি একাডেমী।</div>
<script>
function myFunction() {
document.getElementById("syntax").style.whiteSpace = "nowrap";
}
</script>
</body>
</html>
ফলাফল
white-space প্রোপার্টির ভ্যালু-সমূহ
- normal - একটি সিংগেল হোয়াইট স্পেসে ক্রমানুক্রমিক white-space কলাপ্স হবে। যখন দরকার তখন টেক্সট ভাঁজ(wrap) হবে। এটি ডিফল্ট।
- nowrap - একটি সিংগেল হোয়াইট স্পেসে ক্রমানুক্রমিক white-space কলাপ্স হবে। টেক্সট কখনোই ভাঁজ হবে না। যতক্ষন পর্যন্ত <br> ট্যাগ দেয়া না হবে ততক্ষন টেক্সট একই লাইনে চলতে থাকবে।
- pre - ব্রাউজার হোয়াইট স্পেস সংরক্ষিত রাখবে। টেক্সট শুধুমাত্র লাইন ব্রেকে ভাঁজ হবে। এইচটিএমএল এর <pre> ট্যাগ এর মত।
- pre-line - একটি সিংগেল হোয়াইট স্পেসে ক্রমানুক্রমিক white-space কলাপ্স হবে। যখন দরকার হবে এবং লাইন ব্রেকে টেক্সট ভাঁজ হবে।
- pre-wrap - ব্রাউজার হোয়াইট স্পেস সংরক্ষিত রাখবে।যখন দরকার হবে এবং লাইন ব্রেকে টেক্সট ভাঁজ হবে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
white-space প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।