Bootstrap 5 Text Truncation

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.

Output:

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

Output:

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