Tailwind CSS - 行高限制

上一頁
下一頁

Tailwind CSS **行高限制**是一個實用程式類，透過在文字超過指定限制時新增省略號 (...) 來限制文字行的長度。

Tailwind CSS 行高限制類

以下是提供控制文字行可見性並防止內容溢位的 Tailwind CSS 行高限制類列表。

類名 屬性
line-clamp-1 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp-2 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp-3 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp-4 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp-5 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp-6 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp-none overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: none;

Tailwind CSS 行高限制類的功能

  • **line-clamp-1:** 此類將文字內容限制在一行內顯示。
  • **line-clamp-2:** 此類將文字內容限制在兩行內顯示。
  • **line-clamp-3:** 此類將文字內容限制在三行內顯示。
  • **line-clamp-4:** 此類將文字內容限制在四行內顯示。
  • **line-clamp-5:** 此類將文字內容限制在五行內顯示。
  • **line-clamp-6:** 此類將文字內容限制在六行內顯示。
  • **line-clamp-none:** 此類允許文字內容無任何行限制地顯示。

Tailwind CSS 行高限制類示例

以下是限制文字內容顯示到特定行數的 Tailwind CSS 行高限制類示例。

截斷多行文字

此示例演示了 Tailwind CSS 行高限制類如何使用“**line-clamp-***”實用程式將文字內容的顯示限制在定義的行數內，確保其適合分配的空間限制。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Clamp
    </h1> 
    <p class="line-clamp-1 mb-4">
        <strong>line-clamp-1:</strong> 
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
    <p class="line-clamp-2 mb-4">
        <strong>line-clamp-2:</strong>
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
</body>

</html>

取消懸停狀態下的多行文字截斷

此示例演示了 Tailwind CSS 行高限制類如何使用“**line-clamp-***”實用程式將文字內容的顯示限制在定義的行數內，以及如何在懸停狀態下取消行高限制。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Clamp
    </h1> 
    <p class="line-clamp-1 hover:line-clamp-none mb-4">
        <strong>Hover On Text:</strong> 
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
    <p class="line-clamp-2 hover:line-clamp-none mb-4">
        <strong>Hover On Text:</strong>
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
</body>

</html>

注意： 由於某些瀏覽器的限制，`line-clamp-3` 及更高的類在限制可見文字行數方面與 `line-clamp-2` 的行為類似。

列印頁面
上一頁
下一頁
廣告