Tailwind CSS - Overflow
Tailwind CSS Overflow 是一个实用类，它提供了一种有效的方法来处理超出其容器边界的内容。它提供了一种裁剪内容或添加滚动条的方法。
Tailwind CSS Overflow 类
以下是 Tailwind CSS Overflow 类的列表，这些类提供了一种有效的方法来处理过大的内容。
| 类 | CSS 属性 |
|---|---|
| overflow-auto | overflow: auto; |
| overflow-hidden | overflow: hidden; |
| overflow-clip | overflow: clip; |
| overflow-visible | overflow: visible; |
| overflow-scroll | overflow: scroll; |
| overflow-x-auto | overflow-x: auto; |
| overflow-y-auto | overflow-y: auto; |
| overflow-x-hidden | overflow-x: hidden; |
| overflow-y-hidden | overflow-y: hidden; |
| overflow-x-clip | overflow-x: clip; |
| overflow-y-clip | overflow-y: clip; |
| overflow-x-visible | overflow-x: visible; |
| overflow-y-visible | overflow-y: visible; |
| overflow-x-scroll | overflow-x: scroll; |
| overflow-y-scroll | overflow-y: scroll; |
Tailwind CSS Overflow 类的功能
- overflow-auto:此类替换 CSS overflow: auto; 属性。此类在内容溢出容器时添加滚动条。
- overflow-hidden:此类替换 CSS overflow: hidden; 属性。此类隐藏溢出容器的内容。
- overflow-clip:此类替换 CSS overflow: clip; 属性。此类会截取溢出容器的内容，使其不可见。
- overflow-visible:此类替换 CSS overflow: visible; 属性。此默认值不会截取溢出内容，而是使其保持可见。
- overflow-scroll: 此类替换了 CSS 的 overflow: scroll; 属性。无论内容是否溢出，此类都会添加滚动条。
- overflow-x-auto: 此类替换了 CSS 的 overflow-x: auto; 属性。如果内容水平溢出，此类会添加水平滚动条。
- overflow-y-auto: 此类替换了 CSS 的 overflow-y: auto; 属性。如果内容垂直溢出，此类会添加垂直滚动条。
- overflow-x-hidden: 此类替换了 CSS 的 overflow-x: hidden; 属性。该类用于隐藏水平溢出内容。
- overflow-y-hidden 该类用于替换 CSS 的 overflow-y: hidden; 属性。该类用于隐藏垂直溢出内容。
- overflow-x-clip 该类用于替换 CSS 的 overflow-x: clip; 属性。该类用于剪切水平溢出内容。
- overflow-y-clip 该类用于替换 CSS 的 overflow-y: clip; 属性。该类用于剪切垂直溢出内容。
- overflow-x-visible 该类用于替换 CSS 的 overflow-x: visible; 属性。此类确保水平内容保持可见。
- overflow-y-visible: 此类替换 CSS overflow-y: visible; 属性。此类确保垂直内容保持可见。
- overflow-x-scroll: 此类替换 CSS overflow-x: scroll; 属性。此类添加水平滚动条。
- overflow-y-scroll: 此类替换 CSS overflow-y: scroll; 属性。此类添加垂直滚动条。
Tailwind CSS Overflow 类示例
以下示例将说明 Tailwind CSS Overflow 类的实用功能。
Tailwind CSS Overflow Auto 类
以下示例说明了 Tailwind CSS Overflow Auto 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow Auto class
</h2>
<div class="overflow-auto
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Hidden 类
以下示例演示了 Tailwind CSS Overflow Hidden 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow Hidden class
</h2>
<div class="overflow-hidden
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Clip 类
以下示例演示了 Tailwind CSS Overflow Clip 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow Clip class
</h2>
<div class="overflow-clip
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Visible 类
以下示例演示了 Tailwind CSS Overflow Visible 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow Visible class
</h2>
<div class="overflow-visible
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Scroll 类
以下示例演示了 Tailwind CSS Overflow Scroll 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow Scroll class
</h2>
<div class="overflow-scroll
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Axis Auto
以下示例演示了 Tailwind CSS Overflow-x-auto 和 Overflow-y-auto 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-x-auto class
</h2>
<div class="overflow-x-auto
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p class="w-96">
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-y-auto class
</h2>
<div class="overflow-y-auto
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Axis Hidden
以下示例演示了 Tailwind CSS Overflow-x-hidden 和 Overflow-y-hidden 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-x-hidden class
</h2>
<div class="overflow-x-hidden
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p class="w-96">
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-y-hidden class
</h2>
<div class="overflow-y-hidden
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Axis Clips
以下示例说明了 Tailwind CSS Overflow-x-clip 和 Overflow-y-clip 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-x-clip class
</h2>
<div class="overflow-x-clip
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p class="w-96">
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-y-clip class
</h2>
<div class="overflow-y-clip
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Axis Visibility
以下示例说明了 Tailwind CSS Overflow-x-visible 和 Overflow-y-visible 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-x-visible class
</h2>
<div class="overflow-x-visible
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p class="w-96">
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-y-visible class
</h2>
<div class="overflow-y-visible
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
Tailwind CSS Overflow Axis Scroll
以下示例说明了 Tailwind CSS Overflow-x-scroll 和 Overflow-y-scroll 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-x-scroll class
</h2>
<div class="overflow-x-scroll
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p class="w-96">
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
<h2 class="text-xl mb-3">
Tailwind CSS Overflow-y-scroll class
</h2>
<div class="overflow-y-scroll
w-60 h-28 p-2
border border-black
bg-fuchsia-200">
<p>
Tailwind CSS Overflow is a utility class that provides
an effective way of handling the content that overflows
the boundaries of its container. It provides a way to
clip the content or add a scroll bar.
</p>
</div>
</body>
</html>
