CSS का उपयोग करके अतिप्रवाहित सामग्री को संभालना

हम किसी तत्व की अतिप्रवाह सामग्री को प्रबंधित/संभालने के लिए CSS अतिप्रवाह संपत्ति का उपयोग कर सकते हैं। यह गुण उपयोगकर्ता को सामग्री को क्लिप करने, क्लिप की गई सामग्री को देखने के लिए स्क्रॉलबार प्रदान करने, कंटेनर के बाहर सामग्री प्रस्तुत करने की अनुमति देता है, इस प्रकार नाम अतिप्रवाह।

सिंटैक्स

CSS ओवरफ्लो प्रॉपर्टी के लिए सिंटैक्स निम्नलिखित है -

आइए CSS ओवरफ्लो प्रॉपर्टी के लिए एक उदाहरण देखें -

उदाहरण

  <हेड> <शीर्षक> सीएसएस ओवरफ़्लो  <शैली> फॉर्म { चौड़ाई:70%; मार्जिन:0 ऑटो; टेक्स्ट-एलाइन:सेंटर;}* {पैडिंग:2px; मार्जिन:5 पीएक्स;} इनपुट [टाइप ="बटन"] {बॉर्डर-त्रिज्या:10 पीएक्स;} # कंटेनरडिव {मार्जिन:0 ऑटो; ऊंचाई:110px; अतिप्रवाह:स्क्रॉल;}
<फ़ील्डसेट><किंवदंती>सीएसएस अतिप्रवाह
यह कुछ डमी पाठ के साथ अनुच्छेद 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। यह कुछ डमी टेक्स्ट के साथ पैराग्राफ 1 है। document.querySelector('#containerDiv').style.overflow ="hidden";}

आउटपुट

‘स्क्रॉलबार निकालें’ clicking क्लिक करने से पहले बटन -

‘स्क्रॉलबार निकालें’ . क्लिक करने के बाद बटन -

आइए CSS अतिप्रवाह संपत्ति के लिए एक और उदाहरण देखें -

उदाहरण

  <हेड> <शीर्षक> सीएसएस ओवरफ़्लो  <शैली> फॉर्म { चौड़ाई:70%; मार्जिन:0 ऑटो; टेक्स्ट-एलाइन:सेंटर;}* {पैडिंग:2px; मार्जिन:5 पीएक्स;} इनपुट [टाइप ="बटन"] {बॉर्डर-त्रिज्या:10 पीएक्स;} # कंटेनरडिव {मार्जिन:0 ऑटो; ऊंचाई:100 पीएक्स; चौड़ाई:100 पीएक्स; ओवरफ्लो:ऑटो;}<फ़ील्डसेट><किंवदंती>सीएसएस ओवरफ़्लो

<इनपुट प्रकार="बटन" onclick="fitHeight()" value="स्क्रॉलबार हटाएं">

आउटपुट

किसी भी बटन को क्लिक करने से पहले -

'स्क्रॉलबार हटाएं' बटन पर क्लिक करने के बाद -