Let us see each of them in detail below.<\/p>\n
CSS OverFlow Values<\/h3>\n1. CSS Overflow visible<\/h4>\n
If no value is specified, this is the default value for the overflow property.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow: visible;\r\n\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-visible-1.webp\")
<\/a><\/p>\nBecause the text cannot fit into the Lavender container, it overflows and crosses the border. It would be even more annoying in a real-world project because the text would overlap with other elements on the page.<\/p>\n
2. CSS Overflow hidden<\/h4>\n
The overflow is clipped, and the rest of the content is hidden using the hidden value:
\nTo prevent overflow from rendering outside the element’s box, set the overflow property to hidden. It will clip the content at the box’s padding edge. Furthermore, scrolling prevents the user from seeing content beyond the padding edge.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow: hidden;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-hidden-1.webp\")
<\/a><\/p>\nIt solves the issue of content being in an area where it should not be, but it does not provide a way to access the cut-off content.<\/p>\n
3. CSS Overflow scroll<\/h4>\n
So we already know that the hidden value removes and conceals the text. However, the scroll value also cuts the text and displays a scrollbar, allowing us to scroll and see the portion of the text that was cut off.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow: scroll;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-scroll-1.webp\")
<\/a><\/p>\nBoth axes now have scrollbars. We don’t need the horizontal scrollbar because there is no content overflowing in that direction.<\/p>\n
4. CSS Overflow auto<\/h4>\n
The auto value is similar to scroll, but it only adds scrollbars when they are required:<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow: auto;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-auto-1.webp\")
<\/a><\/p>\nThe auto value improves the usability of a resource as it excludes unpleasant subway barres when it is not needed. This discourages the appearance of scrollbars when the content does not require the extra space of the container it is placed in. Further, the utilization of auto is useful in rendering the elements of a web page for adequate responses where content dimension may vary due to the flow of devices or the space of a viewport.<\/p>\n
5. CSS overflow clip<\/h4>\n
Overflow-clip appears to work similarly to hidden value in that it clips the content to fit the parent’s box and hides the overflowing content. When the CSS text-overflow property is set to “clip,” inline content that overflows its block container element is clipped at the padding edge. Visitors will be unable to see content beyond the clipped edge.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow: hidden;\r\n text-overflow: clip;\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-clip-1.webp\")
<\/a><\/p>\n6. CSS overflow ellipsis<\/h4>\n
When you use the ellipsis value, it will cut the inline content that overflows its block container element at the padding edge, plus a little extra to fit the ellipsis. This value also prohibits any sort of scrolling, including programmatic scrolling, indicating to the browser that the element’s box is not a scroll container. Visitors will be unable to see content beyond the clipped edge.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n height: 130px;\r\n color: #7700ff;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n width: 250px;\r\n border: 1px solid;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput<\/strong><\/p>\n <\/p>\n
![\"css](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/css-overflow-ellipsis-1.webp\")
<\/a><\/p>\n7. CSS overflow-x and overflow-y properties<\/h4>\n
The overflow-x and overflow-y properties specify whether content overflow should be changed only horizontally or vertically (or both). It holds for the horizontal and vertical axes. If you’d rather check for overflow separately, you can do so with these:<\/p>\n
\n- overflow-x specifies what happens when horizontal content overflows (from left to right).<\/li>\n
- overflow-y specifies what happens when vertical content overflows (from top to bottom).<\/li>\n<\/ul>\n
overflow-x: hidden; \/* For Removes horizontal scrollbar *\/\r\noverflow-y: scroll; \/* For Adding vertical scrollbar *\/\r\n<\/pre>\nThe same values can also be used here: visible, hidden, scroll, and auto.<\/p>\n
<html>\r\n<head>\r\n<style>\r\ndiv {\r\n background-color: #e3d3d3;\r\n width: 200px;\r\n height: 130px;\r\n color: #7700ff;\r\n border: 2px solid; \r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div>DataFlair:CSS Overflow -\r\nThis is fairly straightforward. We've made the background of our page White. The background colour of our div element, which serves as a container, is set to Lavender. It has a height of 130px and a width of 200px. Then we made the text in our paragraph green.\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n