CSS Overflow नाम की एक Property प्रदान करता है जो Browser को बताता है कि Box का Materials Box से बड़ा होने पर क्या करना चाहिए. और फिर ये Browser Box को Scrollbars को उपयोग करने की अनुमति देता है.
यह Property निम्नलिखित Values में से एक ले सकती है -
| Value | Description |
|---|---|
| visible | यह Content को इसके Element की सीमाओ को Overflow करने की अनुमति देता है. |
| hidden | नेस्टेड एलिमेंट की सामग्री केवल कोन्टाइनिंग एलिमेंट की सीमा पर काट दी जाती है और कोई स्क्रॉलबार दिखाई नहीं देता है. |
| scroll | कोन्टाइनिंग एलिमेंट का आकार नहीं बदलता है लेकिन उपयोगकर्ता को सामग्री देखने के लिए स्क्रॉल करने की अनुमति देने के लिए स्क्रॉलबार जोड़े जाते हैं. |
| auto | उद्देश्य स्क्रॉल के समान होता है लेकिन स्क्रॉलबार केवल तभी दिखाया जाएगा जब सामग्री अतिप्रवाह करती है. |
<!DOCTYPE HTML>
<html>
<head>
<title>Scrollbars Example</title>
</head>
<style type="text/css">
.scroll{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</div>
</body>
</html>