Open In App

Bootstrap 5 Text Truncation

Last Updated : 16 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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">
        rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
        crossorigin="anonymous">
        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">
        rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
        crossorigin="anonymous">
        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/



Previous Article
Next Article

Similar Reads

ReactJS MDBootstrap Text truncation Utilities
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Text truncation Utilities in ReactJS MDBootstrap. Text truncation Utilities is used to use an ellipsis to break up large sequences of text. Syntax:
2 min read
How to use line-clamp Class for Text Truncation in Tailwind CSS ?
The line-clamp-[number] Class in Tailwind CSS is used for text truncation by limiting the number of displayed lines. This is particularly useful for creating ellipsis in multi-line text when the content exceeds a specified number of lines. Syntax&lt;div class="line-clamp-3"&gt; &lt;!-- Text content --&gt;&lt;/div&gt;&lt;div class="truncate"&gt;
1 min read
How to select all text in HTML text input when clicked using JavaScript?
This example shows how to select entire input in a single click using javaScript. Syntax: &lt;input onClick="this.select();" &gt; or document.getElementById("ID").select(); Example-1: Using "this.select()". &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Select all text in HTML text input when clicked &lt;/title&gt; &lt;/head&gt; &lt;
1 min read
How to create long shadow of text without using text-shadow in HTML and CSS ?
Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi
2 min read
How to embed text and text boxes in New Google Sites ?
Adding text and giving style to them is the most important thing to make a good website. Texts are the face of the website, good content displays the richness of the website. To add texts and edit them in Google Sites follow the steps mentioned below: Go to the insert panel present on the right side of the editing page and select the Text Box optio
1 min read
How to replace a text in a string with another text using PHP ?
A string is a sequence of one or more characters. A string is composed of characters, each of which can be replaced easily in the script. A large number of in-built PHP methods can be used to perform string replacements. Approach 1: Using str_replace() method - The str_replace() method is used to replace a text in the string with another string. Ho
3 min read
How to get text inside Text component onPress in ReactJS ?
In this article, we will learn "How to get the text inside Text component onPress in ReactJS?". Problem Statement: Sometimes in an application, it is required to get the text inside certain components, in order to reuse the components again &amp; again just by changing the text value. Approach: We will set the property inside the component's tag to
4 min read
How to place cursor position at end of text in text input field using JavaScript ?
In this article, we are going to learn about how to place the cursor at the end of the text in a text input element using JavaScript.  At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different
2 min read
How Create a Text Box Where User Can't Type Inside the Text Box ?
To create a text box where the user can't type inside the text box, we have different approaches. In this article, we are going to learn how to create a text box where the user can't type inside the text box in JavaScript. Below are the approaches to creating a text box where the user can't type inside the text box: Table of Content Using Readonly
3 min read
Text Animation with changing the color of the text using HTML and CSS
Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this
2 min read