CSS - overflow-inline Property
CSS overflow-inline property controls how overflowing content is displayed when it overflows the inline edges of an element.
Property overflow-inline is supported only on Firefox browser. Hence all the examples will work only on Firefox browsers.
Possible Values
-
visible − The content that overflows the padding box is shown outside of its inline start and end edges.
-
hidden − The content is clipped at the inline start and end edges of the padding box.
-
clip − The overflow content is clipped at the edge of the overflow clip.
-
scroll − The scroll bar is added when the content of an element exceeds its boundaries.
-
auto − A scroll bars are automatically displayed when content overflows the container.
Applies to
All the HTML elements.
DOM Syntax
overflow-inline: visible|hidden|clip|scroll|auto;
CSS overflow-inline - With visible & hidden Values
The overflow-inline property can be set to visible to allow the content to overflow the padding box's edges, or to hidden to prevent it from overflowing.
<html> <head> <style> .container { display:flex; } div.overflow-inline-visible { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-inline: visible; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-inline-hidden { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-inline: hidden; } </style> </head> <body> <div class="container"> <div class="overflow-inline-visible"> <h4>Tutorialspoint CSS Overflow-inline Visible</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> <div class="overflow-inline-hidden"> <h4>Tutorialspoint CSS Overflow-inline Hidden</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </div> </body> </html>
CSS overflow-inline - clip Value
If you set the overflow-inline property to clip, the content will be clipped if it overflows the inline dimension of the padding box. No scrollbars will be added.
<html> <head> <style> div.overflow-inline-clip { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-inline: clip; } h4 { text-align: center; color: #D90F0F; } </style> </head> <body> <div class="overflow-inline-clip"> <h4>Tutorialspoint CSS Overflow-inline Clip</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </body> </html>
CSS overflow-inline - With scroll & auto Values
Following example demonstrates how the overflow-inline property can be set to scroll to add a scrollbar, or to auto to add a scrollbar only if necessary −
<html> <head> <style> .container { display:flex; } div.overflow-inline-scroll { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-inline: scroll; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-inline-auto { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-inline: auto; } </style> </head> <body> <div class="container"> <div class="overflow-inline-scroll"> <h4>Tutorialspoint CSS Overflow-inline Scroll</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> <div class="overflow-inline-auto"> <h4>Tutorialspoint CSS Overflow-inline Auto</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google