首頁 >web前端 >css教學 >使用 CSS 將文字長度限制設為 N 行

使用 CSS 將文字長度限制設為 N 行

王林轉載: 2023-08-27 13:29:081337瀏覽

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

有時候，開發者需要根據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 指令是什麼？下一篇：SASS 中的 @extend 指令是什麼？

看更多