使用CSS设置文本长度限制为N行

要将文本长度限制为n行，这有助于更规范地呈现文本并提高可读性。此过程也称为截断。在本文中，我们将了解截断文本的不同方法。

在本文中，我们有一个包含一些文本内容的div元素。我们的任务是使用CSS将文本长度限制为N行。

设置文本长度限制为N行的几种方法

以下是使用HTML和CSS设置进度条颜色的方法列表，其中包含分步说明和完整的示例代码。

使用white-space属性限制文本

在这种方法中，我们将通过使用CSS overflow、white-space和text-overflow属性将文本长度限制为第一行来仅显示一行文本。我们将截断其余文本。

  • 我们使用了"overflow: hidden;" CSS属性来裁剪和隐藏溢出的内容。
  • 我们使用了"white-space: nowrap;" CSS属性，以便文本在一行中显示。
  • 我们使用了"text-overflow: ellipsis;" CSS属性，以便在文本溢出时显示省略号。

示例

这是一个完整的示例代码，实现了上述步骤，使用CSS将文本长度限制为第一行。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Set the limit of text length to N lines using CSS
    </title>
    <style>
        div {
            height: auto;
            width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: #04af2f;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>
        Setting limit of text length to N lines 
        using CSS
    </h3>
    <p>
        In this example we have used CSS 
        text-overflow property to limit text length 
        to 1 line using CSS.
    </p>
    <div>
        This is a div containing multiple lines of text.
        The text visibility is limited to 1 line only.
    </div>
</body>
</html>

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

使用webkit-line-clamp属性限制文本

在这种方法中，我们将通过将文本长度限制设置为前三行来显示三行文本。

  • 我们使用了"-webkit-line-clamp: 3;" CSS属性来设置行数，在这里用户只能看到三行，因为我们将它的值指定为三。
  • 我们使用了"overflow: hidden;" CSS属性来裁剪和隐藏溢出的内容。
  • 我们使用了"text-overflow: ellipsis;" CSS属性，以便在文本溢出时显示省略号。

示例1

这是一个完整的示例代码，实现了上述步骤，使用CSS在第三行之后设置文本长度限制。

Open Compiler
<html>
<head>
    <title>
        Set the limit of text length to N lines using CSS
    </title>
    <style>
        div {
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 20px;
            max-height: 100px;
            padding: 4px 10px;
            max-width: 400px;
            background-color: #04af2f;
            color: white;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <h3>
        Setting limit of text length to N lines
        using CSS
    </h3>
    <p>
        In this example we have used -webkit-line-clamp
        property to limit text after 3 ines using CSS.
    </p>
    <div>
        JavaScript is a lightweight, interpreted programming 
        language. It is commonly used to create dynamic 
        and interactive elements in web applications. 
        JavaScript is very easy to implement because it is 
        integrated with HTML. It is open and cross-platform.
        This JavaScript tutorial has been designed for 
        beginners as well as working professionals to help 
        them understand the basic to advanced concepts and 
        functionalities of JavaScript.
    </div>
</body>
</html>

示例2

此示例演示了将文本截断为N行的实时用法。

  • 我们使用HTML和CSS创建了卡片组件。
  • 我们在卡片左侧添加了图像，文本在右侧，卡片的宽度是固定的。

我们将显示卡片右侧的文本，而不会使文本溢出。我们将文本截断为四行，我们可以在输出中看到。

这是一个完整的示例代码，实现了上述步骤，为简洁的卡片设计设置第四行后的文本长度限制。

Open Compiler
<html>
<head>
    <title>
        Set the limit of text length to N lines using CSS
    </title>
    <style>
        .card {
            background-color: rgb(58, 57, 57);
            color: white;
            width: 400px;
            height: 80px;
            display: flex;
            border-radius: 12px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                        0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: left;
            justify-content: center;
        }
        .img {
            width: 160px;
            height: 70px;
            margin-right: 30px;
            padding: 5px;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .content {
            padding:5px;
            width: 450px;
            height: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <h3>
        Setting limit of text length to N lines
        using CSS
    </h3>
    <p>
        In this example we have used -webkit-line-clamp
        property to limit text after 3 ines using CSS.
    </p>
    <div class="card">
        <div class="img">
            <img src="/html/images/test.png" alt="img">
        </div>
        <div class="content">
            This is an information about the image.
            Whatever text will fit to the div, it
            will be shown. If the text is more than
            the div, then it will be hidden and the
            text will be shown as ellipsis.
        </div>
    </div>
</body>
</html>

结论

在本文中，我们学习并了解了如何将文本截断为多行。我们可以使用'overflow: hidden'和'text-overflow: ellipsis' CSS属性来截断文本。此外，我们需要使用'white-space: no-wrap'在一行中截断文本，并使用'webkit-line-clamp: lines' CSS属性将文本截断为多行。

更新于：2024年7月22日

12K+ 浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告