資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究使用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將文字長度限制為第一行。
<!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>
使用webkit-line-clamp屬性限制文字
在這種方法中，我們將透過將文字長度限制設定為前三行來顯示三行文字。
- 我們使用了"-webkit-line-clamp: 3;" CSS屬性來設定行數，在這裡使用者只能看到三行，因為我們將它的值指定為三。
- 我們使用了"overflow: hidden;" CSS屬性來裁剪和隱藏溢位的內容。
- 我們使用了"text-overflow: ellipsis;" CSS屬性，以便在文字溢位時顯示省略號。
示例1
這是一個完整的示例程式碼，實現了上述步驟，使用CSS在第三行之後設定文字長度限制。
<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>
<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+ 瀏覽量
廣告