CSS多行溢出显示省略号|极客教程

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>Single Line Ellipsis</title>
<style>
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
  <div class="ellipsis">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.ellipsis类设置了white-space: nowrap、overflow: hidden和text-overflow: ellipsis属性，以及一个固定宽度。当文本内容超出容器宽度时，会显示省略号。

2. 多行溢出显示省略号

要实现多行文本溢出显示省略号的效果，可以结合-webkit-line-clamp和display: -webkit-box属性。-webkit-line-clamp属性用来指定显示的行数，display: -webkit-box属性用来将元素设置为块级容器。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Line Ellipsis</title>
<style>
  .multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
  <div class="multi-line-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.multi-line-ellipsis类设置了display: -webkit-box、-webkit-line-clamp: 3、-webkit-box-orient: vertical和overflow: hidden属性，以及一个固定宽度。当文本内容超出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 Ellipsis</title>
<style>
  .dynamic-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
  <div class="dynamic-line-ellipsis" id="dynamicText">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
<script>
  const textElement = document.getElementById('dynamicText');
  const lineHeight = parseInt(window.getComputedStyle(textElement).lineHeight);
  const maxHeight = lineHeight * 3;
  const textHeight = textElement.clientHeight;
  if (textHeight > maxHeight) {
    textElement.style.webkitLineClamp = Math.floor(maxHeight / lineHeight);
  }
</script>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，通过JavaScript动态计算文本的行高和实际高度，然后根据行高和最大高度来设置-webkit-line-clamp属性，实现根据文本内容的实际行数显示省略号。

4. 使用`clamp()`函数

CSS中的clamp()函数可以实现动态计算文本行数并显示省略号的效果。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 Ellipsis</title>
<style>
  .clamp-function-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: clamp(2, 3, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
  <div class="clamp-function-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.clamp-function-ellipsis类设置了-webkit-line-clamp: clamp(2, 3, 5)属性，表示文本内容最少显示2行，首选显示3行，最多显示5行，并显示省略号。

5. 使用`-webkit-box`和`-webkit-line-clamp`结合`-webkit-mask-image`

除了使用-webkit-line-clamp属性外，还可以结合-webkit-box和-webkit-mask-image属性来实现多行溢出显示省略号的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask Image Ellipsis</title>
<style>
  .mask-image-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%);
  }
</style>
</head>
<body>
  <div class="mask-image-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.mask-image-ellipsis类设置了-webkit-line-clamp: 3属性，并使用-webkit-mask-image属性来创建一个渐变遮罩，实现多行溢出显示省略号的效果。

6. 使用`-webkit-line-clamp`和`-webkit-gradient`

另一种实现多行溢出显示省略号的方法是结合-webkit-line-clamp和-webkit-gradient属性。-webkit-gradient属性可以创建渐变效果，用于显示省略号。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Ellipsis</title>
<style>
  .gradient-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
    background: -webkit-linear-gradient(transparent, #fff 70%);
  }
</style>
</head>
<body>
  <div class="gradient-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.gradient-ellipsis类设置了-webkit-line-clamp: 3属性，并使用-webkit-linear-gradient属性来创建一个渐变背景，实现多行溢出显示省略号的效果。

7. 使用`-webkit-line-clamp`和`-webkit-mask-box-image`

另一种结合-webkit-line-clamp和-webkit-mask-box-image属性来实现多行溢出显示省略号的方法。-webkit-mask-box-image属性可以创建一个遮罩效果，用于显示省略号。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mask Box Image Ellipsis</title>
<style>
  .mask-box-image-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
    -webkit-mask-box-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%);
  }
</style>
</head>
<body>
  <div class="mask-box-image-ellipsis">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，.mask-box-image-ellipsis类设置了-webkit-line-clamp: 3属性，并使用-webkit-mask-box-image属性来创建一个遮罩效果，实现多行溢出显示省略号的效果。

8. 使用`-webkit-line-clamp`和`-webkit-gradient`结合JavaScript动态计算

结合-webkit-line-clamp、-webkit-gradient和JavaScript动态计算文本行数，可以实现根据文本内容的实际行数显示省略号的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Gradient Ellipsis</title>
<style>
  .dynamic-gradient-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
    background: -webkit-linear-gradient(transparent, #fff 70%);
  }
</style>
</head>
<body>
  <div class="dynamic-gradient-ellipsis" id="dynamicText">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
<script>
  const textElement = document.getElementById('dynamicText');
  const lineHeight = parseInt(window.getComputedStyle(textElement).lineHeight);
  const maxHeight = lineHeight * 3;
  const textHeight = textElement.clientHeight;
  if (textHeight > maxHeight) {
    textElement.style.webkitLineClamp = Math.floor(maxHeight / lineHeight);
  }
</script>
</body>
</html>

Output:

CSS多行溢出显示省略号

在上面的示例中，通过JavaScript动态计算文本的行高和实际高度，然后根据行高和最大高度来设置-webkit-line-clamp属性，结合-webkit-gradient属性实现根据文本内容的实际行数显示省略号的效果。

结语

通过本文的介绍，我们详细了解了如何使用CSS实现多行溢出显示省略号的效果。从简单的text-overflow: ellipsis属性到结合-webkit-line-clamp、-webkit-mask-image、-webkit-gradient等属性的高级技巧，我们可以根据实际需求选择合适的方法来处理文本溢出显示省略号的情况。