📪Overflow

Overflow Utility Classes

• .overflow-hidden

  • Description: Applies the overflow: hidden property to hide overflowing content within an element.

  • CSS equivalent: overflow: hidden;

  • Example usage:

    <div class="overflow-hidden">
      <!-- Content with hidden overflow -->
    </div>

• .scroll-y

  • Description: Applies the overflow-y: scroll property to enable vertical scrolling when the content exceeds the height of the element.

  • CSS equivalent: overflow-y: scroll;

  • Example usage:

    <div class="scroll-y">
      <!-- Content with vertical scrolling -->
    </div>

• .scroll-x

  • Description: Applies the overflow-x: scroll property to enable horizontal scrolling when the content exceeds the width of the element.

  • CSS equivalent: overflow-x: scroll;

  • Example usage:

    <div class="scroll-x">
      <!-- Content with horizontal scrolling -->
    </div>

• .overflow-x-clip

  • Description: Applies the overflow-x: clip property to clip overflowing content horizontally.

  • CSS equivalent: overflow-x: clip;

  • Example usage:

    <div class="overflow-x-clip">
      <!-- Content with clipped horizontal overflow -->
    </div>

• .overflow-y-clip

  • Description: Applies the overflow-y: clip property to clip overflowing content vertically.

  • CSS equivalent: overflow-y: clip;

  • Example usage:

    <div class="overflow-y-clip">
      <!-- Content with clipped vertical overflow -->
    </div>

• .overflow-clip

  • Description: Applies the overflow: clip property to clip overflowing content both horizontally and vertically.

  • CSS equivalent: overflow: clip;

  • Example usage:

    <div class="overflow-clip">
      <!-- Content with clipped overflow in both directions -->
    </div>

• .overflow-visible

  • Description: Applies the overflow: visible property to allow overflowing content to be visible outside the element.

  • CSS equivalent: overflow: visible;

  • Example usage:

    <div class="overflow-visible">
      <!-- Content with visible overflow -->
    </div>

• .overflow-auto

  • Description: Applies the overflow: auto property to enable automatic scrolling when the content exceeds the size of the element.

  • CSS equivalent: overflow: auto;

  • Example usage:

    <div class="overflow-auto">
      <!-- Content with automatic scrolling when necessary -->
    </div>

• .overflow-x-visible

  • Description: Applies the overflow-x: visible property to allow horizontal overflowing content to be visible.

  • CSS equivalent: overflow-x: visible;

  • Example usage:

    <div class="overflow-x-visible">
      <!-- Content with visible horizontal overflow -->
    </div>

• .overflow-x-auto

  • Description: Applies the overflow-x: auto property to enable automatic horizontal scrolling when the content exceeds the width of the element.

  • CSS equivalent: overflow-x: auto;

  • Example usage:

    <div class="overflow-x-auto">
      <!-- Content with automatic horizontal scrolling when necessary -->
    </div>

• .overflow-y-visible

  • Description: Applies the overflow-y: visible property to allow vertical overflowing content to be visible.

  • CSS equivalent: overflow-y: visible;

  • Example usage:

    <div class="overflow-y-visible">
      <!-- Content with visible vertical overflow -->
    </div>

• .overflow-y-auto

  • Description: Applies the overflow-y: auto property to enable automatic vertical scrolling when the content exceeds the height of the element.

  • CSS equivalent: overflow-y: auto;

  • Example usage:

    <div class="overflow-y-auto">
      <!-- Content with automatic vertical scrolling when necessary -->
    </div>

Overflow Wrap Utility Classes

• .overflow-wrap-normal

  • Description: Applies the overflow-wrap: normal property to prevent line breaks within words when the content exceeds the width of the element.

  • CSS equivalent: overflow-wrap: normal;

  • Example usage:

    <div class="overflow-wrap-normal">
      <!-- Content with normal line wrapping -->
    </div>

• .overflow-wrap-break

  • Description: Applies the overflow-wrap: break-word property to allow line breaks within words when the content exceeds the width of the element.

  • CSS equivalent: overflow-wrap: break-word;

  • Example usage:

    <div class="overflow-wrap-break">
      <!-- Content with word breaking within lines -->
    </div>

These utility classes provide control over the overflow behavior and line wrapping within elements, allowing you to manage the display and scrolling of overflowing content.