极客笔记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;
在上述语法中，我们将overflow设置为hidden，将’text-overflow: elipsis’设置为截断文本。’-webkit-line-clamp’属性的值表示要显示的行数。
示例1
在下面的示例中，我们只显示一行文本。我们将截断其他文本。我们将300px设置为div元素的宽度，将overflow设置为hidden，将text-overflow属性设置为ellipsis。此外，我们使用’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>
用户学会了将文本截断为多行。我们可以使用’overflow: hidden’和’text-overflow: elipsis’ CSS属性来截断文本。此外，我们需要使用’white-space: no-wrap’来将文本截断为单行，并使用’webkit-line-clamp: lines’ CSS属性来将文本截断为多行。