CSS超过显示省略号|极客教程

CSS超过显示省略号

在网页开发中，经常会遇到文本内容过长，超出了容器的显示范围，这时就需要使用CSS来处理文本溢出的情况。一种常见的处理方式就是使用省略号来表示文本的截断，让用户知道文本内容并没有完全显示出来。本文将详细介绍如何使用CSS来实现文本超过显示省略号的效果。

1. 单行文本超过显示省略号

首先，我们来看如何处理单行文本超过显示省略号的情况。我们可以使用text-overflow: ellipsis属性来实现这一效果。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Line Text Overflow 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的div元素，设置了white-space: nowrap来防止文本换行，overflow: hidden来隐藏超出容器的部分，text-overflow: ellipsis来显示省略号。运行代码后，可以看到文本超出容器宽度时会显示省略号。

2. 多行文本超过显示省略号

接下来，我们来看如何处理多行文本超过显示省略号的情况。CSS中并没有直接支持多行文本省略号的属性，但我们可以通过结合使用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient来实现多行文本省略号的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Line Text Overflow Ellipsis</title>
<style>
  .ellipsis-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-multiline">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-multiline的div元素，设置了display: -webkit-box、-webkit-line-clamp: 3和-webkit-box-orient: vertical来限制文本显示为3行，并且垂直排列。运行代码后，可以看到文本超出3行时会显示省略号。

3. 行内元素超过显示省略号

除了块级元素外，我们也可以处理行内元素超过显示省略号的情况。我们可以使用display: inline-block和max-width属性来实现这一效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Element Overflow Ellipsis</title>
<style>
  .ellipsis-inline {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<span class="ellipsis-inline">This is a long text that will be truncated with an ellipsis.</span>
</body>
</html>

Output:

CSS超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-inline的span元素，设置了display: inline-block和max-width: 200px来限制文本宽度，并且使用white-space: nowrap、overflow: hidden和text-overflow: ellipsis来显示省略号。运行代码后，可以看到行内元素超出宽度时会显示省略号。

4. 使用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 Text Overflow Ellipsis</title>
<style>
  .ellipsis-dynamic {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-dynamic" id="dynamicText"></div>
<script>
  const text = '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.';
  const dynamicText = document.getElementById('dynamicText');
  dynamicText.textContent = text;
  if (dynamicText.scrollWidth > dynamicText.clientWidth) {
    dynamicText.textContent = text.slice(0, Math.floor(text.length * dynamicText.clientWidth / dynamicText.scrollWidth)) + '...';
  }
</script>
</body>
</html>

Output:

CSS超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-dynamic的div元素，并使用JavaScript来动态计算文本长度并添加省略号。运行代码后，可以看到文本超出容器宽度时会显示省略号。

5. 使用CSS属性`-webkit-line-clamp`实现多行文本省略号

除了结合使用display: -webkit-box、-webkit-line-clamp和-webkit-box-orient来实现多行文本省略号外，我们还可以直接使用-webkit-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 Text Overflow Ellipsis</title>
<style>
  .ellipsis-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-line-clamp">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-line-clamp的div元素，并直接使用-webkit-line-clamp: 3属性来限制文本显示为3行，并且垂直排列。运行代码后，可以看到文本超出3行时会显示省略号。

6. 使用CSS属性`-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>Box Text Overflow Ellipsis</title>
<style>
  .ellipsis-box {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-box">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-box的div元素，并使用-webkit-box属性来限制文本显示为3行，并且垂直排列。运行代码后，可以看到文本超出3行时会显示省略号。

7. 使用CSS属性`-webkit-box`实现多行文本省略号（不支持IE）

在某些情况下，我们可能需要兼容不支持-webkit-box属性的浏览器，这时可以使用display: -webkit-box和-webkit-line-clamp属性来实现多行文本省略号的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Text Overflow Ellipsis (No IE Support)</title>
<style>
  .ellipsis-box-no-ie {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-box-no-ie">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-box-no-ie的div元素，并使用display: -webkit-box和-webkit-line-clamp: 3属性来限制文本显示为3行，并且垂直排列。运行代码后，可以看到文本超出3行时会显示省略号。

8. 使用CSS属性`-webkit-line-clamp`实现多行文本省略号（不支持IE）

另一种不支持IE的多行文本省略号实现方式是直接使用-webkit-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 Text Overflow Ellipsis (No IE Support)</title>
<style>
  .ellipsis-line-clamp-no-ie {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-line-clamp-no-ie">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-line-clamp-no-ie的div元素，并直接使用-webkit-line-clamp: 3属性来限制文本显示为3行，并且垂直排列。运行代码后，可以看到文本超出3行时会显示省略号。

9. 使用CSS属性`-webkit-box`实现多行文本省略号（兼容IE）

如果需要兼容IE浏览器，我们可以使用display: -webkit-box和-webkit-line-clamp属性结合-ms-line-clamp属性来实现多行文本省略号的效果。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Text Overflow Ellipsis (IE Compatible)</title>
<style>
  .ellipsis-box-ie {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-line-clamp: 3;
    -ms-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-box-ie">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超过显示省略号

在上面的示例代码中，我们定义了一个类名为ellipsis-box-ie的div元素，并使用display: -webkit-box、display: -ms-flexbox和-ms-line-clamp: 3属性来兼容IE浏览器，实现多行文本省略号的效果。运行代码后，可以看到文本超出3行时会显示省略号。

10. 使用CSS属性`-webkit-line-clamp`实现多行文本省略号（兼容IE）

另一种兼容IE的多行文本省略号实现方式是直接使用-webkit-line-clamp属性结合-ms-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 Text Overflow Ellipsis (IE Compatible)</title>
<style>
  .ellipsis-line-clamp-ie {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-line-clamp: 3;
    -ms-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="ellipsis-line-clamp-ie">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>

在上面的示例代码中，我们定义了一个类名为ellipsis-line-clamp-ie的div元素，并使用display: -webkit-box、display: -ms-flexbox和-ms-line-clamp: 3属性来兼容IE浏览器，实现多行文本省略号的效果。运行代码后，可以看到文本超出3行时会显示省略号。