CSS Overflow
In this page:
selector {
overflow: visible | hidden | scroll | auto;
overflow-x: value;
overflow-y: value;
}Default Visible Overflow
Default रूप से, browsers overflow को visible की तरह treat करते हैं। अगर content अपने parent container के dimensions से ज़्यादा हो जाए, तो यह बस बाहर फैल जाता है और आस-पास के elements के ऊपर render होता है। यह आपके content को चुपचाप छुपने से रोकता है।
- जब आप चाहें कि decorative background shapes अपने cards के बाहर फैलें तो default visible setting इस्तेमाल करें।
- Accepted values:
- visible — content बाहर फैलता है (default)
- hidden — overflowing content को clip करता है
- scroll — हमेशा scrollbars दिखाता है
- auto — सिर्फ ज़रूरत पड़ने पर scrollbars
- clip — बिना किसी scrolling के clip करता है
- overflow-x | overflow-y — हर axis को अलग-अलग control करते हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Default Visible Overflow
<style>
.box {
width: 100px;
height: 50px;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough to spill outside the box's boundaries</div>Hidden Overflow से Clipping
overflow को hidden set करना browser को instruct करता है कि container की boundaries से ज़्यादा किसी भी content को clip कर दे, extra content को बिना कोई scrollbars जोड़े पूरी तरह invisible बनाते हुए।
- अपने card के rounded corners से match करने के लिए nested elements को clip करने के लिए overflow: hidden इस्तेमाल करें।
- Accepted values:
- visible — content बाहर फैलता है (initial value)
- hidden — clipped, कोई scrollbars नहीं
- scroll — clipped, scrollbars हमेशा दिखते हैं
- auto — सिर्फ ज़रूरत पड़ने पर scrollbars
- clip — बिना किसी scrolling के clipped
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Clipping with Hidden Overflow
<style>
.box {
width: 100px;
height: 50px;
overflow: hidden;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">This text is long enough that the excess gets clipped away</div>Scroll और Auto से Scrolling
overflow को scroll set करना browser को container में scrollbars जोड़ने पर मजबूर करता है। overflow को auto set करना ज़्यादा efficient है, क्योंकि यह browser को बताता है कि scrollbars सिर्फ तभी automatically जोड़े जब content असल में fit होने के लिए बहुत बड़ा हो।
- जब content छोटा हो तो अपने layout को खाली, unclickable scrollbars से cluttered होने से रोकने के लिए scroll के बजाय हमेशा overflow: auto prefer करें।
- Accepted values:
- visible — content बाहर फैलता है (initial value)
- hidden — clipped, कोई scrollbars नहीं
- scroll — clipped, scrollbars हमेशा दिखते हैं
- auto — सिर्फ ज़रूरत पड़ने पर scrollbars
- clip — बिना किसी scrolling के clipped
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Scrolling with Scroll and Auto
<style>
.box {
width: 150px;
height: 60px;
overflow: auto;
background: lightyellow;
border: 2px solid #cc9900;
}
</style>
<div class="box">
<p>Scrollbar appears because this content is actually too tall to fit inside the box.</p>
<p>Keep scrolling to see the rest of this line.</p>
<p>Still more content below.</p>
</div>Ellipsis से Text Truncation
single-line text overflows के लिए, आप text-overflow और overflow properties को combine करके automatically एक साफ़ ellipsis (...) जोड़ सकते हैं, अपने card layouts को साफ़-सुथरा दिखाते हुए।
- truncation trigger करने के लिए हमेशा text-overflow: ellipsis को white-space: nowrap और overflow: hidden के साथ जोड़ें।
- Accepted values:
- clip — text को काट देता है (initial value)
- ellipsis — जहाँ text कटा है वहाँ … दिखाता है
- string — एक custom string (limited support)
- visible के अलावा overflow चाहिए
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Text Truncation with Ellipsis
<style>
.truncate {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: lightyellow;
border: 1px solid #cc9900;
padding: 4px;
}
</style>
<div class="truncate">This single line of text is too long to fit and gets truncated</div>Overflow से Floats को Contain करना
एक classic CSS layout trick floated children को contain करने के लिए parent elements पर overflow: auto या overflow: hidden इस्तेमाल करना है। यह एक नया Block Formatting Context (BFC) establish करता है, जो parent container को अपने floated children के चारों ओर expand और wrap होने पर मजबूर करता है।
उदाहरण: Containing Floats with Overflow
<style>
.parent {
overflow: auto;
background: #eee;
border: 1px solid #999;
}
.child {
float: left;
width: 100px;
height: 100px;
background: steelblue;
color: white;
}
</style>
<div class="parent">
<div class="child">Floated</div>
</div>- overflow settings को नज़रअंदाज़ करके text को बाहर फैलने और आस-पास के content blocks को cover करने देना।
- important text या actions वाले containers पर overflow (overflow: hidden) hide करना, उन्हें अनपहुँच बनाते हुए।
- text-overflow: ellipsis इस्तेमाल करते समय white-space: nowrap और overflow: hidden को combine करना भूल जाना।
- overflow property control करती है कि browsers उस content को कैसे handle करते हैं जो अपने container के fixed dimensions से ज़्यादा हो।
- extra content को साफ़ तरीके से clip करने के लिए overflow: hidden इस्तेमाल करें, और सिर्फ ज़रूरत पड़ने पर automatically scrollbars जोड़ने के लिए overflow: auto।
- overflow-x और overflow-y properties इस्तेमाल करके horizontal और vertical overflow को अलग-अलग control करें।
horizontal और vertical splits सहित overflow properties हर web browser द्वारा natively supported हैं।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: