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 प्रॉपर्टी,
जो वर्टिकली बाहर निकलने वाले हिस्सों को काटती है