Tailwind CSS - 行距限制

Tailwind CSS Line Clamp 行距限制 是一个实用类，当文本超出指定限制时，它会添加省略号 (...) 来限制文本行的长度。

Tailwind CSS 行距限制类

以下是 Tailwind CSS 行距限制类的列表，这些类提供了控制文本行可见性和防止内容溢出的方法。

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 类似。