Bootstrap 简明教程

Bootstrap - Text truncation

本章讨论了 Bootstrap 提供的实用程序，用于截断长字符串文本。文本截断是一项功能，它允许你截断溢出其容器的长字符串文本，并在截断文本的末尾显示省略号 (…)，以表示有更多文本可用。

This chapter discusses about the utility provided by Bootstrap that helps in truncating long strings of text. Text truncation is a feature that allows you to truncate long strings of text that overflow their container, and display an ellipsis (…) at the end of the truncated text to indicate that more text is available.

This can be useful for situations where you have limited space to display text, such as in a table or card.
To truncate text in Bootstrap 5, you can use the .text-truncate class.
It requires display: inline-block or display: block.
This class can be added to any element that contains text, such as a <div> or a <p> element.

以下是如何使用 .text-truncate 类的示例：

Here’s an example of how to use the .text-truncate class:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Text truncation</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Text truncation example</h4>
        <!-- Block level -->
        <div class="row">
            <div class="col-3 text-truncate">
            The string of text seems to be very long, thus truncating it.
            </div>
        </div>
        <!-- Inline level -->
        <span class="d-inline-block text-truncate" style="max-width: 150px;">
            The string of text seems to be very long, thus truncating it.
        </span>
    </body>
</html>