CSS - overflow-x Property
CSS overflow-x property specifies that the content of an element overflows its left and right edges and overflow in the horizontal direction.
Possible Values
-
visible − An element is allowed to overflow the element's left and right edges.
-
hidden − Any content that overflows horizontally will be clipped and not displayed.
-
clip − The content of an element is clipped ,and does not overflow the element's left and right edges.
-
scroll − Adds the horizontal scrollbar to the element.
-
auto − A horizontal scrollbar is added to the element only when the content overflows its left and right edges.
Applies to
All the HTML elements.
DOM Syntax
object.style.overflowX = "visible|hidden|clip|scroll|auto";
CSS overflow-x - With hidden & visible Values
The following example demonstrates how to use overflow-x property with hidden snd visible values −
<html> <head> <style> .container { display: flex; } div.overflow-x-visible { background-color: #2fe262; border: 2px solid #000000; width: 60px; overflow-x: visible; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-x-hidden { background-color: #2fe262; border: 2px solid #000000; width: 60px; overflow-x: hidden; } </style> </head> <body> <div class="container"> <div class="overflow-x-visible"> <h4>Tutorialspoint CSS Overflow-x Visible</h4> omnis dolor repellendus. non-characteristic words. </div> <div class="overflow-x-hidden"> <h4>Tutorialspoint CSS Overflow-x Hidden</h4> omnis dolor repellendus. non-characteristic words. </div> </div> </body> </html>
CSS overflow-x - clip Value
When the overflow-x property is set to clip, the content of an element is clipped at the element's padding box at the left and right edges.
<html> <head> <style> div.overflow-x-clip { background-color: #2fe262; border: 2px solid #000000; width: 60px; overflow-x: clip; } h4 { text-align: center; color: #D90F0F; } </style> </head> <body> <div class="overflow-x-clip"> <h4>Tutorialspoint CSS Overflow-x Clip</h4> omnis dolor repellendus. non-characteristic words, Temporibus. </div> </body> </html>
CSS overflow-x - With scroll & auto Values
The CSS overflow-x property can be set to scroll or auto. Scroll will add a scrollbar to an element when its content overflows its width, while auto will only add a scrollbar if the content overflows its width.
Here is an example −
<html> <head> <style> .container { display: flex; } div.overflow-x-scroll { background-color: #2fe262; border: 2px solid #000000; width: 70px; overflow-x: scroll; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-x-auto { background-color: #2fe262; border: 2px solid #000000; width: 70px; overflow-x: auto; } </style> </head> <body> <div class="container"> <div class="overflow-x-scroll"> <h4>Tutorialspoint CSS Overflow-x Scroll</h4> omnis dolor repellendus. non-characteristic words. </div> <div class="overflow-x-auto"> <h4>Tutorialspoint CSS Overflow-x Auto</h4> omnis dolor repellendus. non-characteristic words. </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google