Bootstrap - Text truncation

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.

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>
Advertisements