জাভাস্ক্রিপ্টে ওভারফ্লো হলে কন্টেন্টের বাম/ডান এজ কী করা উচিত

যদি কন্টেন্ট ওভারফ্লো করে, তবে overflowX প্রপার্টি ব্যবহার করে বাম/ডান এজ সমস্যা সমাধান করুন এবং স্ক্রোল যোগ করুন। স্ক্রোল যোগ করলে দর্শকগণ সহজে পুরো কন্টেন্ট পড়তে পারবে।

উদাহরণ

জাভাস্ক্রিপ্টে ওভারফ্লো হলে কন্টেন্টের বাম/ডান এজ কী করা উচিত তা শিখতে নিচের কোডটি চালান:

<!DOCTYPE html> <html>    <head>       <style>          #box {             width: 350px;             height: 150px;             background-color: orange;             border: 3px solid red;             white-space: nowrap;             margin-left: 20px;          }       </style>    </head>    <body>       <p>ক্লিক করুন ওভারফ্লো প্রপার্টি ব্যবহার করে স্ক্রোল সেট করতে।</p>       <button type="button" onclick="display()">স্ক্রোল সেট করুন</button>       <div id="box">          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>       </div>       <br>       <br>       <script>          function display() {             document.getElementById("box").style.overflowX = "scroll";          }       </script>    </body> </html>

ব্যাখ্যা: overflow-x হরিজন্টাল ওভারফ্লো নিয়ন্ত্রণ করে। মান: visible (ডিফল্ট), hidden (কেটে ফেলে), scroll (সবসময় স্ক্রোলবার), auto (প্রয়োজনে স্ক্রোলবার)। উদাহরণে white-space: nowrap দেওয়ায় টেক্সট এক লাইনে থাকে, ফলে হরিজন্টাল ওভারফ্লো হয়। overflow-y ভার্টিক্যাল ওভারফ্লো নিয়ন্ত্রণ করে।