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` 的行为类似。

打印页面