en en en en es en en ceb en en en en en en en en en en en en en en en en en en en en en en en en en en hi en en en en en en en en en en en en en kn en en en en en en en pt en en en fr en en en en en en en fr en en en en en en en en en th en en sv la en en en en en en ca en en en en kn pl en en en en en en en en fa kn en en en en en en en en en en en en en en en pt en pl pl pl en es en en en en fa ja en en en fr ru eo fr fr en fi en en en en en en en en ro en en en ru en en en ru ca en en en en en en en en en en en ro uz cs it hbs_lat en hbs_lat de ru de hbs_lat en en en en en en en en en en en en en en nl en en la en en en fr en en la en en fr en en la en en en en en la en en en en en en en en en bg en en en en en en en en en en en en en en en en en en en de en en en en en en
Overflow | Utilities | Zenplates
Themes Extensions Patterns Apps Services Documentation Contact us Buy now
No search results to display
Adding a logo and favicon
Adding a notification banner
Adding Font Awesome icons
Utilities for controlling how an element handles content that is too large for the container.
Use .overflow-auto to add scrollbars to an element in the event that its content overflows the bounds of that element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.
Unlike .overflow-scroll, which always show scrollbars, this utility will only show them if scrolling is necessary.
Use .overflow-x-auto to allow horizontal scrolling if needed.
Use .overflow-y-auto to allow vertical scrolling if needed.
Use .overflow-hidden to clip any content within an element that overflows the bounds of that element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.
Use .overflow-x-hidden to hide overflow content of a block-level element when it overflows at the left and right edges.
Use .overflow-y-hidden to hide overflow content of a block-level element when it overflows at the top and bottom edges.
Use .overflow-visible show overflow content of a block-level element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.
Use .overflow-x-visible to show overflow content of a block-level element when it overflows at the left and right edges.
Use .overflow-y-visible to show overflow content of a block-level element when it overflows at the top and bottom edges.
Use .overflow-scroll to add scrollbars to an element. Unlike .overflow-auto, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems hide unnecessary scrollbars regardless of this setting.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet. Nam lacinia diam in erat faucibus aliquet. Sed ac ultrices elit. Curabitur suscipit faucibus nunc, vel convallis nunc elementum vel. Donec eleifend venenatis pretium. Praesent tempor mi sit amet ullamcorper dapibus.
Use .overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
Use .overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.
By default, only responsive variants are generated for overflow utilities.
To control the display behavior of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility.
For example, use .md:overflow-hidden to apply the overflow-hidden utility at only medium screen sizes and above.
To include hover-state variants like .hover:overflow-hidden, add "overflow" to the $hover-variants variable when recompiling your CSS:
$hover-variants: ( // ... "overflow", );
Questions or feedback about this article? Let us know
Themes Extensions Patterns Apps
Documentation Blog Billing portal Contact us Support
We build software that lets you deliver the best possible experience to your customers.
Zenplates is an authorized Zendesk theme developer partner
Terms and conditions Privacy policy
Provide details about your purchase to unlock this and other code examples throughout the website.
The email address used for the purchase
The subdomain of your Zendesk account
Product Select a product The Complete Package Ada theme Arya theme Azura theme Bing theme Braxton theme Dex theme Duke theme Fitzgerald theme Hansel theme Indigo theme Ivy theme Jade theme Juno theme Jupiter theme Kai theme Leopold theme Lorde theme Milo theme Oden theme Pierce theme Rebel theme Ruby theme Rosetta theme Shine theme Thora theme Xavier theme Zane theme Zephyr theme