首页 >web前端 >css教程 >使用 CSS 将文本长度限制设置为 N 行

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

王林转载: 2023-08-27 13:29:081338浏览

有时候，开发者需要根据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;

在上面的语法中，我们将溢出设置为隐藏，‘text-overflow: elipsis’来截断文本。 “-webkit-line-clamp”属性的值显示要显示的行数。

示例 1

在下面的示例中，我们仅显示一行文本。我们将截断其他文本。我们将 300px 设置为 div 元素的宽度，隐藏为溢出，省略号为 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>

Example 2

的中文翻译为：

示例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>

Example 3

的中文翻译为：

示例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>

用户学会了将文本截断为多行。我们可以使用‘overflow:hidden’和‘text-overflow:elipsis’CSS属性来截断文本。此外，我们需要使用“white-space: no-wrap”来截断单行文本，并使用“webkit-line-clamp:lines”CSS属性将文本截断为多行。

以上是使用 CSS 将文本长度限制设置为 N 行的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：SASS 中的 @extend 指令是什么？下一篇：如何在 CSS 中设置旋转元素的基本位置？

查看更多