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; 屬性。此類新增垂直捲軸。

Tailwind CSS 溢位類示例

以下示例將說明 Tailwind CSS 溢位類實用程式。

Tailwind CSS 溢位自動類

以下示例說明了Tailwind CSS 溢位自動類的用法。

示例

<!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 溢位隱藏類的用法。

示例

<!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 溢位裁剪類的用法。

示例

<!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 溢位可見類的用法。

示例

<!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 溢位滾動類的用法。

示例

<!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 類的用法。

示例

<!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 類的用法。

示例

<!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 類的用法。

示例

<!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 類的用法。

示例

<!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 類的用法。

示例

<!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>
列印頁面
上一頁
下一頁
廣告