overflow প্রপার্টি

overflow প্রপার্টিটি ব্রাউজারকে নির্দেশ দেয়, ব্লকের সীমানা (এর প্রস্থ বা উচ্চতা) ছেড়ে যাওয়া কনটেন্টের (টেক্সট, ইমেজ, অন্যান্য ব্লক) সাথে কীভাবে আচরণ করতে হবে। ব্রাউজার ওভারফ্লো অংশটি লুকিয়ে দিতে পারে, স্ক্রলবার যোগ করতে পারে বা কিছুই নাও করতে পারে (যেমন আছে তেমনই ছেড়ে দিতে পারে - সীমানা ছেড়ে বেরিয়ে থাকা)।

সিনট্যাক্স

সিলেক্টর {
	overflow: hidden | scroll | auto | visible;
}

মানসমূহ

মান	বর্ণনা
`hidden`	ব্লকের সীমানা ছেড়ে যাওয়া কনটেন্টটি লুকিয়ে দেয়।
`scroll`	স্ক্রলবার যোগ করে, এবং সেটা সবসময়, এমনকি যদি কিছুও না বের হয় (সেক্ষেত্রে সেগুলো নিষ্ক্রিয় থাকবে)।
`auto`	প্রয়োজনে স্ক্রলবার যোগ করে: যদি কনটেন্ট কুলো না - তাহলে সেগুলো দেখা যাবে, যদি সব কুলোয় - তাহলে থাকবে না।
`visible`	ব্লকের সীমানা ছেড়ে যাওয়া কনটেন্টটি লুকায় না।

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

উদাহরণ . visible মান

এই উদাহরণে, একটি খুব লম্বা শব্দ কন্টেইনারের মধ্যে আঁটবে না এবং এর সীমানা ছেড়ে বেরিয়ে যাবে। কোনো কাটাছেঁড়া ঘটবে না:

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

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

উদাহরণ . visible মান

এবং এখন শুধু প্রস্থই নয়, উচ্চতাও সীমিত (টেক্সট ব্লকের বাইরে উচ্চতা দিয়েও বেরিয়ে যাবে):

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

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

উদাহরণ . hidden মান

এখন কন্টেইনারের সীমানা ছেড়ে যাওয়া সবকিছু কেবল কেটে ফেলা হবে (উচ্চতা দিয়েও)। খেয়াল করুন যে, উচ্চতা দিয়ে কাটা শুধুমাত্র তখনই ঘটে যখন এটি স্পষ্টভাবে সেট করা থাকে। অন্যথায় টেক্সট কন্টেইনারকে উচ্চতা দিয়ে প্রসারিত করে - এবং কোনো কাটাছেঁড়া হবে না:

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

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

উদাহরণ . scroll মান

scroll মানের জন্য স্ক্রলবার সবসময় থাকবে, এমনকি যদি কিছুও না বের হয় (সেক্ষেত্রে সেগুলো নিষ্ক্রিয় থাকবে)। এখন টেক্সট প্রস্থ বা উচ্চতা কোনোটিতেই বেরোয়নি, তবুও স্ক্রলবার আছে (নিষ্ক্রিয়):

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

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

উদাহরণ . auto মান

auto মানের জন্য স্ক্রলবার শুধুমাত্র তখনই যোগ করা হয় যখন কনটেন্ট কন্টেইনার ছেড়ে বেরোয়। এখন সেগুলো নেই, কারণ সবকিছু কুলোয়:

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

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

উদাহরণ . auto মান

এবং এখন প্রস্থ সীমিত করি - অনুভূমিক স্ক্রলবার দেখা যাবে:

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

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

আরও দেখুন

word-break প্রপার্টি,
যা একটি লম্বা শব্দের অক্ষরগুলিকে নতুন লাইনে নিয়ে যায়
overflow-wrap প্রপার্টি,
যা একটি লম্বা শব্দের অক্ষরগুলিকে নতুন লাইনে নিয়ে যায়
overflow-x প্রপার্টি,
যা অনুভূমিকভাবে ওভারফ্লো অংশগুলি কেটে দেয়
overflow-y প্রপার্টি,
যা উল্লম্বভাবে ওভারফ্লো অংশগুলি কেটে দেয়