CSS限制行数|极客教程

CSS限制行数

在网页设计中，有时候我们希望文本内容只显示固定行数，超出部分自动省略或者显示省略号。这在一些新闻列表、博客摘要、产品介绍等场景中非常常见。本文将介绍如何使用CSS来限制文本内容的行数，并提供详细的示例代码。

1. 使用`text-overflow: ellipsis`显示省略号

text-overflow: ellipsis是CSS中的一个属性，用于在文本溢出时显示省略号。结合white-space: nowrap和overflow: hidden可以实现文本内容只显示一行，并在溢出时显示省略号。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Example</title>
<style>
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
</style>
</head>
<body>
<p class="text-ellipsis">This is a long text that will be truncated with an ellipsis if it overflows the container.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，当文本内容超出200px的宽度时，会显示省略号。

2. 使用`-webkit-line-clamp`限制行数

除了使用text-overflow: ellipsis显示省略号外，还可以使用-webkit-line-clamp属性来限制文本内容的行数，并在溢出时显示省略号。需要注意的是，-webkit-line-clamp是一个WebKit私有属性，只在WebKit浏览器中有效。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Clamp Example</title>
<style>
.text-line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* 显示3行文本 */
}
</style>
</head>
<body>
<p class="text-line-clamp">This is a long text that will be truncated to 3 lines with an ellipsis if it overflows the container.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，文本内容会被限制在3行，并在溢出时显示省略号。

3. 使用JavaScript动态计算行数

有时候我们需要根据文本内容的实际高度来动态计算显示的行数，这时可以使用JavaScript来实现。下面是一个示例代码，通过计算文本内容的高度和行高来动态设置显示的行数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Line Count Example</title>
<style>
.text-dynamic {
  line-height: 1.5; /* 行高为1.5倍字体大小 */
  overflow: hidden;
}
</style>
</head>
<body>
<p class="text-dynamic" id="dynamicText">This is a long text that will be dynamically truncated based on the height of the text.</p>
<script>
const textElement = document.getElementById('dynamicText');
const lineHeight = parseFloat(window.getComputedStyle(textElement).lineHeight);
const maxHeight = 3 * lineHeight; // 显示3行文本
if (textElement.clientHeight > maxHeight) {
  const text = textElement.textContent;
  let truncatedText = text;
  while (textElement.clientHeight > maxHeight) {
    truncatedText = truncatedText.slice(0, -1);
    textElement.textContent = truncatedText + '...';
  }
}
</script>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过动态计算文本内容的高度和行高，实现了根据实际高度动态设置显示的行数。

4. 使用`-moz-box`和`-moz-box-orient`实现多行省略

除了WebKit浏览器支持的-webkit-line-clamp属性外，Firefox浏览器也提供了类似的属性-moz-box和-moz-box-orient来实现多行省略。下面是一个示例代码，实现在Firefox浏览器中多行省略。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiline Ellipsis Example</title>
<style>
.text-multiline {
  display: -moz-box;
  -moz-box-orient: vertical;
  overflow: hidden;
  -moz-box-lines: 3; /* 显示3行文本 */
}
</style>
</head>
<body>
<p class="text-multiline">This is a long text that will be truncated to 3 lines with an ellipsis in Firefox.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过-moz-box和-moz-box-orient属性实现了在Firefox浏览器中多行省略。

5. 使用`line-clamp`实现多行省略

除了WebKit浏览器和Firefox浏览器提供的属性外，CSS3也提供了line-clamp属性来实现多行省略。下面是一个示例代码，实现在支持line-clamp属性的浏览器中多行省略。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Clamp Example</title>
<style>
.text-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
</head>
<body>
<p class="text-line-clamp">This is a long text that will be truncated to 3 lines with an ellipsis in browsers that support line-clamp.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过line-clamp属性实现了在支持该属性的浏览器中多行省略。

6. 使用`max-height`和`line-height`实现多行省略

除了上述方法外，还可以通过设置max-height和line-height属性来实现多行省略。下面是一个示例代码，实现在不支持line-clamp属性的浏览器中多行省略。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max Height Example</title>
<style>
.text-max-height {
  max-height: 4.5em; /* 显示3行文本 */
  line-height: 1.5; /* 行高为1.5倍字体大小 */
  overflow: hidden;
}
</style>
</head>
<body>
<p class="text-max-height">This is a long text that will be truncated to 3 lines with an ellipsis using max-height and line-height.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过设置max-height和line-height属性实现了在不支持line-clamp属性的浏览器中多行省略。

7. 使用`-webkit-line-clamp`和`-webkit-box`结合实现多行省略

在一些情况下，我们可能需要结合使用-webkit-line-clamp和-webkit-box来实现更复杂的文本省略效果。下面是一个示例代码，结合使用这两个属性来实现多行省略。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Ellipsis Example</title>
<style>
.text-complex {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
</head>
<body>
<p class="text-complex">This is a long text that will be truncated to 3 lines with an ellipsis using both -webkit-line-clamp and -webkit-box.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过结合使用-webkit-line-clamp和-webkit-box属性实现了更复杂的多行省略效果。

8. 使用`clamp()`函数实现多行省略

CSS3引入了clamp()函数，可以在一定范围内动态调整属性的值。我们可以结合clamp()函数和line-height属性来实现多行省略效果。下面是一个示例代码，使用clamp()函数实现多行省略。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clamp Function Example</title>
<style>
.text-clamp {
  line-height: clamp(1.2em, 1.5em, 3em); /* 行高在1.2em和3em之间，最多显示3行文本 */
  overflow: hidden;
}
</style>
</head>
<body>
<p class="text-clamp">This is a long text that will be truncated to 3 lines with an ellipsis using the clamp() function.</p>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过使用clamp()函数动态调整行高，实现了多行省略效果。

9. 使用`-webkit-line-clamp`和`-webkit-box`实现多行省略并显示完整内容

有时候我们希望在文本内容超出指定行数时显示省略号，但同时也希望提供一个按钮或链接，点击后可以展开显示完整内容。下面是一个示例代码，结合使用-webkit-line-clamp和-webkit-box实现多行省略并显示完整内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Ellipsis Example</title>
<style>
.text-expandable {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expand-button {
  display: block;
  text-align: center;
  color: blue;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="text-expandable">
  <p>This is a long text that will be truncated to 3 lines with an ellipsis. Click the button below to expand and show the full content.</p>
</div>
<div class="expand-button" onclick="expandText()">Expand</div>
<script>
function expandText() {
  document.querySelector('.text-expandable').style.webkitLineClamp = 'none';
  document.querySelector('.expand-button').style.display = 'none';
}
</script>
</body>
</html>

Output:

CSS限制行数

在上面的示例中，通过点击按钮展开显示完整内容，结合使用-webkit-line-clamp和-webkit-box实现了多行省略效果。

10. 使用`-webkit-line-clamp`和`-webkit-box`实现多行省略并显示部分内容

有时候我们希望在文本内容超出指定行数时显示省略号，但同时也希望显示部分内容，而不是完全省略。下面是一个示例代码，结合使用-webkit-line-clamp和-webkit-box实现多行省略并显示部分内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Partial Ellipsis Example</title>
<style>
.text-partial {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.partial-content {
  display: none;
}
.show-button {
  display: block;
  text-align: center;
  color: blue;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="text-partial">
  <p>This is a long text that will be truncated to 3 lines with an ellipsis. Click the button below to show more content.</p>
</div>
<div class="partial-content">
  <p>This is the additional content that will be shown when the button is clicked.</p>
</div>
<div class="show-button" onclick="showPartialContent()">Show More</div>
<script>
function showPartialContent() {
  document.querySelector('.partial-content').style.display = 'block';
  document.querySelector('.show-button').style.display = 'none';
}
</script>
</body>
</html>