Bootstrap5 文本截断|极客教程

Bootstrap5 文本截断

1. 引言

在现代网页设计中，页面内容的呈现方式对于用户体验至关重要。对于较长的文本内容，通常需要进行截断处理，以便在有限的空间内展示关键信息，避免页面过长或者内容重叠的问题。

Bootstrap是一种广泛使用的开源CSS框架，提供丰富的样式和组件，用于快速构建响应式和美观的网页。Bootstrap5作为最新版本，提供了更多的功能和更新的设计风格，其中包括了文本截断的新特性。

本文将详细介绍Bootstrap5中的文本截断功能，包括如何使用该功能以及常见的应用示例。希望通过本文的阐述，读者能够更加深入了解此功能，并能够在实际开发中灵活运用。

2. Bootstrap5 文本截断的基本用法

在Bootstrap5中，文本截断功能主要通过以下两个类来实现：

.text-truncate：用于对单行文本进行截断显示。
.overflow-hidden：用于对多行文本进行截断显示。

下面的代码演示了如何使用这两个类来实现文本截断效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <title>Bootstrap5 Text Truncation</title>
</head>
<body>
  <div class="container">
    <h1>Bootstrap5 Text Truncation</h1>
    <p class="text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, enim quis eleifend porttitor, lacus neque faucibus tortor, at tempus lectus turpis id risus.
    </p>

    <p class="overflow-hidden" style="max-height: 100px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, enim quis eleifend porttitor, lacus neque faucibus tortor, at tempus lectus turpis id risus. Sed velit metus, laoreet vitae metus nec, lacinia laoreet elit.
    </p>
  </div>
</body>
</html>

在上述示例中，通过给截断文本所在的元素添加相应的类，即可实现文本截断的效果。首先，使用.text-truncate类对单行文本进行截断，超出部分将以省略号表示。其次，使用.overflow-hidden类对多行文本进行截断，默认情况下只显示文本的部分，超出部分将被隐藏。

需要注意的是，在使用overflow-hidden类进行多行文本截断时，限定文本显示的最大高度通过max-height样式来设定。可以根据实际需要调整max-height的值，以控制文本显示的行数。

3. Bootstrap5 文本截断的高级用法

除了使用基本的文本截断类，Bootstrap5还提供了一些高级用法，以满足更多的需求。下面将介绍两种常见的高级文本截断应用示例。

3.1 省略号样式自定义

在基本用法中，使用.text-truncate类对单行文本进行截断后，超出部分将默认以省略号（...）表示。但是，有时我们可能希望自定义省略号的样式，以适应特定的设计风格。

通过在父元素中添加.text-truncate类，并在其中嵌入一个子元素，我们可以通过CSS样式对省略号进行自定义。以下示例展示了如何实现自定义的省略号样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    .custom-ellipsis::after {
      content: "... More";
      color: red;
    }
  </style>
  <title>Bootstrap5 Custom Ellipsis</title>
</head>
<body>
  <div class="container">
    <h1>Bootstrap5 Custom Ellipsis</h1>
    <p class="text-truncate custom-ellipsis">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, enim quis eleifend porttitor, lacus neque faucibus tortor, at tempus lectus turpis id risus.
    </p>
  </div>
</body>
</html>

在上述示例中，通过为父元素添加.custom-ellipsis类，并在该元素的CSS样式中定义伪元素::after，我们可以修改省略号的内容和样式。在这里，我们将省略号的内容设置为"... More"，并将颜色设置为红色。

3.2 鼠标悬停显示完整文本

有时，当文本被截断时，我们希望鼠标悬停在截断文本上时，能够显示完整的文本内容，以便用户更好地查看信息。Bootstrap5通过使用tooltip组件，可以实现这一需求。

以下示例展示了如何使用tooltip组件，在鼠标悬停时显示完整的文本内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <title>Bootstrap5 Tooltip Text</title>
</head>
<body>
  <div class="container">
    <h1>Bootstrap5 Tooltip Text</h1>
    <p class="text-truncate" data-bs-toggle="tooltip" data-bs-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, enim quis eleifend porttitor, lacus neque faucibus tortor, at tempus lectus turpis id risus.">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula, enim quis eleifend porttitor, lacus neque faucibus tortor, at tempus lectus turpis id risus.
    </p>
  </div>

  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
</body>
</html>