overflow প্রপার্টি

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

সিনট্যাক্স

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

মানসমূহ

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

উদাহরণ . visible মান

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

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

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

Результат:

উদাহরণ . visible মান

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

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

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

Результат:

উদাহরণ . hidden মান

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

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

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

Результат:

উদাহরণ . scroll মান

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

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

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

Результат:

উদাহরণ . auto মান

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

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

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

Результат:

উদাহরণ . auto মান

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

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

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

Результат:

আরও দেখুন