Overflow

    Utilities for controlling how an element handles content that is too large for the container.

    Show all classes

    Use to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.

    Hiding content that overflows

    Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

    Overflow - 图2

      Scrolling if needed

      1. <div class="overflow-auto ..."></div>

      Use overflow-x-auto to allow horizontal scrolling if needed.

      Overflow - 图4

      Scrolling vertically if needed

      Use to allow vertical scrolling if needed.

      1. <div class="overflow-y-auto h-32 ..."></div>

      Scrolling horizontally always

      Use overflow-x-scroll to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

      1. <div class="overflow-x-scroll ..."></div>

      Use overflow-y-scroll to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

      Overflow - 图7

      Scrolling in all directions

      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 (like macOS) hide unnecessary scrollbars regardless of this setting.

      Hover, focus, and other states

      Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:overflow-scroll to only apply the overflow-scroll utility on hover.

      1. <div class="overflow-auto hover:overflow-scroll">
      2.   <!-- ... -->

      For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

      To learn more, check out the documentation on Responsive Design, and other media query modifiers.