overflow प्रॉपर्टी

overflow प्रॉपर्टी ब्राउज़र को निर्देशित करती है, कि उस कंटेंट (टेक्स्ट, इमेज, अन्य ब्लॉक) के साथ क्या करना है, जो ब्लॉक की सीमाओं (उसकी चौड़ाई या ऊंचाई) से बाहर निकल रहा है। ब्राउज़र बाहर निकलने वाले हिस्से को छिपा सकता है, स्क्रॉल बार जोड़ सकता है या कुछ नहीं कर सकता (जैसा है वैसा छोड़ सकता है - सीमाओं से बाहर निकला हुआ)।

सिंटैक्स

cssसिलेक्टर {
  overflow: hidden | scroll | auto | visible;
}

वैल्यूज

डिफॉल्ट वैल्यू: visible।

उदाहरण . visible वैल्यू

इस उदाहरण में एक बहुत लंबा शब्द कंटेनर में फिट नहीं होगा और उसकी सीमाओं से बाहर निकल जाएगा। कटाव नहीं होता है:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

उदाहरण . visible वैल्यू

और अब न केवल चौड़ाई सीमित है, बल्कि ऊंचाई भी (टेक्स्ट ब्लॉक से बाहर ऊंचाई में भी निकल जाएगा):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

उदाहरण . hidden वैल्यू

अब, कंटेनर की सीमाओं से बाहर निकला हुआ सब कुछ सिर्फ काट दिया जाएगा (ऊंचाई में भी)। ध्यान दें कि ऊंचाई में कटाव तभी होता है जब वह स्पष्ट रूप से सेट की गई हो। अन्यथा स्थिति में टेक्स्ट कंटेनर को ऊंचाई में विस्तारित कर देता है - और कोई कटाव नहीं होगा:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

उदाहरण . scroll वैल्यू

scroll वैल्यू पर स्क्रॉल बार हमेशा रहेंगे, भले ही कुछ भी बाहर न निकले (इस स्थिति में वे निष्क्रिय रहेंगे)। अभी टेक्स्ट न तो चौड़ाई में निकल रहा है, न ही ऊंचाई में, लेकिन स्क्रॉल बार फिर भी हैं (निष्क्रिय):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

उदाहरण . auto वैल्यू

auto वैल्यू पर स्क्रॉल बार तभी जोड़े जाते हैं, जब कंटेंट कंटेनर से बाहर निकल रहा हो। अभी वे नहीं हैं, क्योंकि सब कुछ फिट हो रहा है:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

उदाहरण . auto वैल्यू

और अब हम चौड़ाई सीमित करते हैं - हॉरिजॉन्टल स्क्रॉल बार दिखाई देगा:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

यह भी देखें