This article will demonstrate:
How to Use “overflow-hidden” in Tailwind?
The “overflow-hidden” class hides or clips the content that exceeds that element’s size. To utilize the “overflow-hidden” in Tailwind, create an HTML program and apply the “overflow-hidden” utility class with the specific element.
Syntax
Example
In this example, we will apply the “overflow-hidden” utility to the <div> container to hide the overflow content:
<div class="overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify">
Tailwind CSS provides various "overflow" utilities, such as "overflow-auto", "overflow-scroll", "overflow-hidden",
"overflow-visible" etc. These utilities determine how a specific element handles the content that exceeds the
container size. Each utility offers unique functionality, however, their end goal remains the same, i.e. to control
the overflow behavior of the selected element.
</div>
</body>
Here:
- “overflow-hidden” class is used to hide the content that exceeds the size of the <div> container.
- “bg-purple-300” class sets the purple color to the container’s background.
- “p-4” class sets 4 units of padding on the container’s all side.
- “mx-16” class applies the 16 units of margin on the x-axis of the container.
- “mt-5” class applies the 5 units of margin to the top of the container.
- “h-32” class sets the height of the container to 32 units.
- “text-justify” class justifies the text of the content inside the container.
Output
In the above output, the overflowing content cannot be seen which indicates that the “overflow-hidden” property has been successfully applied.
How to Use “overflow-visible” in Tailwind?
The “overflow-visible” class enables the over-exceeding content to be visible. To utilize the “overflow-visible” in Tailwind, create an HTML structure and apply the “overflow-visible” utility class with the particular element.
Syntax
Example
In this example, we will apply the “overflow-visible” utility to the <div> container to show the overflow content:
<div class="overflow-visible bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify">
Tailwind CSS provides various "overflow" utilities, such as "overflow-auto", "overflow-scroll", "overflow-hidden",
"overflow-visible" etc. These utilities determine how a specific element handles the content that exceeds the
container size. Each utility offers unique functionality, however, their end goal remains the same, i.e. to control
the overflow behavior of the selected element.
</div>
</body>
Here, in the above code snippet, the “overflow-visible” class is used to show the content that exceeds the size of the container.
Output
According to the above output, the “overflow-visible” utility has been applied successfully.
Conclusion
To use the “overflow-hidden” and “overflow-visible” in Tailwind, add the “overflow-hidden” and “overflow-visible” utility classes with the desired elements in the HTML program. The “overflow-hidden” utility hides the overflowing content while the “overflow-visible” shows the overflowing content of the specified element. This article has exemplified the method of using “overflow-hidden” and “overflow-visible” utilities in Tailwind.
