Overflow क्या है
Overflow utilities decide करती हैं कि जब content इसके box से बड़ा हो तो क्या होता है।
In this page:
Syntax
<div class="overflow-auto">scrolls when needed</div>
<div class="overflow-hidden">clipped</div>Overflow
.overflow-auto ज़रूरत पड़ने पर scrollbars add करता है, .overflow-hidden content clip करता है, .overflow-visible इसे spill होने देता है, और .overflow-scroll हमेशा scrollbars दिखाता है।
Directional versions .overflow-x-auto और .overflow-y-auto exist करते हैं। effect के लिए box को एक fixed size दें।
Note:
overflow-auto सिर्फ तभी एक scrollbar दिखाता है जब content overflow हो।
उदाहरण: Overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="overflow-auto border p-2 mb-2" style="max-width: 16rem; max-height: 5rem">This box scrolls because its content is longer than the height allows. Keep writing text so it overflows the box height and shows a scrollbar.</div>
<div class="overflow-hidden border p-2" style="max-width: 16rem; height: 2.5rem">This text is clipped by overflow-hidden when it is too long for the box.</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक height या width set न करना
- overflow-hidden से important content hide करना
- Scrolling areas को nest करना
चैप्टर सारांश
- overflow-auto ज़रूरत पड़ने पर scrollbars add करता है
- overflow-hidden clip करता है
- overflow-x-* और overflow-y-*
- एक limited box size चाहिए
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: