Bootstrap 5 Text Truncation

Last Updated : 2 Aug, 2024

Bootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation.

Text Truncation is used to truncate long statements and paragraphs using an ellipsis(three dots). It only works if the element's display property is set to block or inline-block.

Text Truncation Classes:

  • text-truncate: This class is used to truncate the text inside the element.

Syntax:

<div class="text-truncate">
    Long String of text to truncate
</div>

Example 1: This is a basic example that shows the use of the text-truncate class to truncate a long statement.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <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.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <div class="my-4">
            <h3 class="text-success">GeeksforGeeks</h3>
            <h4>Bootstrap 5 Text Truncation</h4>
        </div>

        <div class="row">

            <!-- Empty Divs are there for making 
                the middle divs in center -->
            <div class="col-3"></div>
            <div class="col-3">
                <p>
                    <strong>Without Truncation:</strong> 
                    This text will not truncate
                </p>
            </div>
            <div class="col-3">
                <p class="text-truncate">
                    <strong>With Truncation:</strong> 
                    This text will truncate when it 
                    overflows the container.
                </p>
            </div>
            <div class="col-3"></div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we show how the text will automatically adjust and truncate according to the width of the viewport.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <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.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <div class="my-4">
            <h3 class="text-success">GeeksforGeeks</h3>
            <h4>Bootstrap 5 Text Truncation</h4>
        </div>

        <p class="text-truncate">
            GeeksforGeeks is a computer science 
            portal founded in 2009 by Sandeep 
            Jain. It offers courses in various 
            computer science  domains like DBMS, 
            OS and ML.
        </p>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.2/helpers/text-truncation/

Comment

Explore