{"id":74192,"date":"2020-01-17T11:41:38","date_gmt":"2020-01-17T06:11:38","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74192"},"modified":"2024-04-12T14:23:21","modified_gmt":"2024-04-12T08:53:21","slug":"overflow-property-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/","title":{"rendered":"Overflow Property"},"content":{"rendered":"<div>It is used to manage content which might possibly spread out or overflow the boundaries of containing element\u2019s dimensional constraints. It has an default value of \u2018visible\u2019 keyword. It takes following keyword values<\/div>\n<div><\/div>\n<ul>\n<li>visible<\/li>\n<li>hidden<\/li>\n<li>scroll<\/li>\n<li>auto<\/li>\n<\/ul>\n<div><\/div>\n<div>This property hides the content if of more size than the space available or to add scroll bars for the extra content. By default this property allows the content overflowing the edges of the containing element. Explanation of all values is given as<\/div>\n<div><\/div>\n<div>\n<p>&nbsp;<\/p>\n<table border=\"1\" width=\"603\" cellspacing=\"0\" cellpadding=\"7\">\n<colgroup>\n<col width=\"55\">\n<col width=\"518\"><\/colgroup>\n<thead>\n<tr valign=\"TOP\">\n<td bgcolor=\"#d9d9d9\" width=\"55\"><b>Value <\/b><\/td>\n<td bgcolor=\"#d9d9d9\" width=\"518\"><b>Description<\/b><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr valign=\"TOP\">\n<td width=\"55\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">visible <\/span><\/p>\n<\/td>\n<td width=\"518\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">The overflow is not clipped. It renders outside the element&#8217;s box. <\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"55\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">hidden <\/span><\/p>\n<\/td>\n<td width=\"518\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">The overflow is clipped, and the rest of the content will be invisible<\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"55\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">scroll <\/span><\/p>\n<\/td>\n<td width=\"518\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">The overflow is clipped, but a scroll-bar is added to see the rest of the content<\/span><\/p>\n<\/td>\n<\/tr>\n<tr valign=\"TOP\">\n<td width=\"55\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">auto <\/span><\/p>\n<\/td>\n<td width=\"518\">\n<p align=\"JUSTIFY\"><span style=\"font-family: Baskerville Old Face,serif;\">If overflow is clipped, a scroll-bar should be added to see the rest of the content<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<\/div>\n<div>\n<div>It is used as<\/div>\n<div><\/div>\n<div>.top { width: 150px; overflow: hidden; }<br>\n.mid { height: 100px; overflow: auto; }<\/div>\n<div><\/div>\n<div><strong>Over\ufb02owing on X or Y axis<\/strong> &#8211; The overflow-x and overflow-y property controls the overflow of content for x-axis or y-axis only. They control the overflowing content with a scroll bar and only a vertical scroll bar for the overflow-y property and only a horizontal scroll bar for the overflow-x property.&nbsp; They have default value of \u2018visible\u2019. Both the properties accepts values as that of overflow property which are<\/div>\n<div><\/div>\n<ul>\n<li>visible<\/li>\n<li>hidden<\/li>\n<li>scroll<\/li>\n<li>auto<\/li>\n<\/ul>\n<\/div>\n\n\n<p>Go To-\u00a0<a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certified-css3-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Certified CSS3 Developer<\/strong>\u00a0<strong>Tutorial<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is used to manage content which might possibly spread out or overflow the boundaries of containing element\u2019s dimensional constraints. It has an default value of \u2018visible\u2019 keyword. It takes following keyword values visible hidden scroll auto This property hides the content if of more size than the space available or to add scroll bars&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8568],"tags":[1816],"class_list":["post-74192","page","type-page","status-publish","hentry","category-css3","tag-overflow-property"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Overflow Property - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Overflow Property - Tutorial\" \/>\n<meta property=\"og:description\" content=\"It is used to manage content which might possibly spread out or overflow the boundaries of containing element\u2019s dimensional constraints. It has an default value of \u2018visible\u2019 keyword. It takes following keyword values visible hidden scroll auto This property hides the content if of more size than the space available or to add scroll bars...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:21+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/\",\"name\":\"Overflow Property - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T06:11:38+00:00\",\"dateModified\":\"2024-04-12T08:53:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Overflow Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Overflow Property - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/","og_locale":"en_US","og_type":"article","og_title":"Overflow Property - Tutorial","og_description":"It is used to manage content which might possibly spread out or overflow the boundaries of containing element\u2019s dimensional constraints. It has an default value of \u2018visible\u2019 keyword. It takes following keyword values visible hidden scroll auto This property hides the content if of more size than the space available or to add scroll bars...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:21+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/","name":"Overflow Property - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T06:11:38+00:00","dateModified":"2024-04-12T08:53:21+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/overflow-property-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Overflow Property"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74192"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74192\/revisions"}],"predecessor-version":[{"id":85677,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74192\/revisions\/85677"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}