📪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.
Last updated