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

cssweb developmentfront end technology更新于 2024/3/22 2:20:17

有时，开发者需要根据 HTML 元素的尺寸截断文本。例如，div 元素的宽度为 100px，并且只能包含部分字符。因此，我们需要使用 CSS 截断文本。

然而，我们可以使用 JavaScript 截断文本，但这可能会导致问题。例如，我们可以在 100px 的宽度内显示 18 个字符，但有时由于字符大小写，显示的字符数会更少。在这种情况下，如果我们显示 18 个字符，它就会溢出。

因此，使用 CSS 截断文本是一个更好的主意。

语法

用户可以按照以下语法使用 CSS 将文本长度限制设置为 N 行。

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: Vertical;

在上述语法中，我们将 overflow 设置为隐藏，并使用 text-overflow: elipsis 属性截断文本。-webkit-line-clamp 属性的值表示要显示的行数。

示例 1

在下面的示例中，我们只显示一行文本。我们将截断其他文本。我们将 div 元素的宽度设置为 300px，将 overflow 设置为隐藏，并将 ellipsis 属性设置为 text-overflow 属性。此外，我们使用 white-space 属性和 no-wrap 属性值，使文本仅显示一行。

<html>
<head>
   <style>
      div {
         height: auto;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         background-color: red;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to 1 line using CSS</h2>
   <div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>

示例 2

在下面的示例中，我们显示了 N 行截断的文本。我们像第一个示例一样将文本添加到 div 元素中。之后，我们使用"webkit-line-clamp"CSS 属性来设置行数，而不是使用"white-space: no-wrap"CSS 属性。

在输出中，用户可以观察到它只显示了三行截断的文本。用户可以更改行数并观察输出。

<html>
<head>
   <style>
      div {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         line-height: 20px;
         max-height: 100px;
         padding: 4px 10px;
         max-width: 400px;
         background-color: aqua;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h3>Limiting the text length to N line using CSS</h3>
   <div>Git is a popular version control system used to track changes in code or other files. It allows multiple
      developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
      distributed architecture, which means that each developer has their own local copy of the repository, and
      changes can be easily merged together.</div>
</body>
</html>

示例 3

在下面的示例中，我们将演示将文本截断为 N 行的实际用法。在这里，我们使用 HTML 和 CSS 创建了卡片组件。我们在卡片左侧添加了图片，在右侧添加了文本。此外，卡片的宽度是固定的。

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

<html>
<head>
   <style>
      .card {
         background-color: grey;
         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: 130px;
         height: 70px;
         margin-right: 30px;
         padding: 5px;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .content {
         width: 450px;
         height: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to N line using CSS</h3>
   <div class = "card">
      <div class = "img">
         <img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" 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>

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