Css overflow
If the size of a text or image is more than the size (height & width) given to show in the web page, so that some part (part) of the text or image appears outside, then it is called overflow. This property has 5 values which Is as follows -
1. visible
2. hidden
3. scroll
4. Auto
5. Overflow-x
6. Overflow-y
1 css overflow visible
If the size of a text or image is more than the given size (height & width) to be displayed in the web page and it has to be displayed in the web page, then use this value, it will display the overflow part of the text or image in the web page. Is overflow property that by default value is Visible.
Example 1
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="background-color: red; height: 100px; width: 80px; overflow: visible;">1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence</p> </body> </html> |
Output
2 css overflow hidden
If the size of a text or image is more than the given size (height & width) to be displayed in the web page, the overflow part of the text or image is not displayed in the web page when using this value.
Example
|
<!DOCTYPE html> <html> <head><title></title> <style> p{ background-color: red;height: 100px; width: 80px; overflow: hidden; } </style> </head> <body> <p>1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence</p> </body> </html> |
Output
3 css overflow scroll
If the size of a text or image is more than the given size (height & width) to be displayed in the web page and it has to be displayed in the web page, then use this value, this will cause the overflow of a scroll bar text / image in the web page. The part is displayed to be left to right, right to left and up to down, down to up.
Example
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="background-color: red; height: 100px; width: 80px; overflow: scroll;">1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence</p> </body> </html> |
Output
4 css overflow Auto
When the size of a text or image starts to overflow from the given size (height & width) to show in the web page, the scroll bar in the web page has automatic display when using this auto value. The page already has no scroll bar display when the text / image starts to overflow, then the scroll bar is displayed to move the overflow part of the text / image to left, right to left and up to down, down to up.
Example
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="background-color: red; height: 100px; width: 80px; overflow: auto;"> 1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence</p> </body> </html> |
5 css Overflow-x
If the size of a text or image is more than the given size (height & width) to be displayed in the web page and it has to be displayed in the web page, then use this value, use its overflow part of the text or image left to right. And use the Overflow-x value to right to left.
6 css Overflow-y
If the size of a text or image is more than the given size (height & width) to be displayed in the web page and it has to be displayed in the web page, then use this value to use the overflow part of the text or image up to down And use the Overflow-y value to down to up.
Example
|
<!DOCTYPE html> <html> <head> <title></title> <style> p{ background-color: red; height: 100px; width: 80px; } </style> </head> <body> <h2>Using overflow-x : hidden </h2> <p style="overflow-x: hidden; overflow-y: scroll;"> 1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence </p> <h2>Using overflow-y : hidden </h2> <p style="overflow-x: scroll; overflow-y: hidden;"> 1ParagraphSentence 2ParagraphSentence 3ParagraphSentence 4ParagraphSentence 5ParagraphSentence 6ParagraphSentence 7ParagraphSentence </p> </body> </html> |
Output
