Tailwind CSS - 内容溢出

上一个
下一个

Tailwind CSS 内容溢出 是一种实用程序类，提供了一种处理内容溢出其容器边界的有效方法。它提供了一种裁剪内容或添加滚动条的方法。

Tailwind CSS 内容溢出类

以下是Tailwind CSS 内容溢出类的列表，它提供了一种处理过大内容的有效方法。

类 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-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; 属性。此类添加垂直滚动条。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 溢出类示例

以下示例将说明 Tailwind CSS 溢出类实用程序。

Tailwind CSS 溢出自动类

以下示例说明了Tailwind CSS 溢出自动类的用法。

示例

Open Compiler
<!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 溢出隐藏类

以下示例说明了Tailwind CSS 溢出隐藏类的用法。

示例

Open Compiler
<!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 溢出裁剪类

以下示例说明了Tailwind CSS 溢出裁剪类的用法。

示例

Open Compiler
<!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 溢出可见类

以下示例说明了Tailwind CSS 溢出可见类的用法。

示例

Open Compiler
<!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 溢出滚动类

以下示例说明了Tailwind CSS 溢出滚动类的用法。

示例

Open Compiler
<!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 溢出轴自动

以下示例说明了Tailwind CSS Overflow-x-auto & Overflow-y-auto 类的用法。

示例

Open Compiler
<!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 溢出轴隐藏

以下示例说明了Tailwind CSS Overflow-x-hidden & Overflow-y-hidden 类的用法。

示例

Open Compiler
<!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 溢出轴裁剪

以下示例说明了Tailwind CSS Overflow-x-clip & Overflow-y-clip 类的用法。

示例

Open Compiler
<!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 溢出轴可见性

以下示例说明了Tailwind CSS Overflow-x-visible & Overflow-y-visible 类的用法。

示例

Open Compiler
<!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 溢出轴滚动

以下示例说明了Tailwind CSS Overflow-x-scroll & Overflow-y-scroll 类的用法。

示例

Open Compiler
<!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>
打印页面
上一页
下一页
广告