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.
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" >w3wiki</ 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" >w3wiki</ h3 > < h4 >Bootstrap 5 Text Truncation</ h4 > </ div > < p class = "text-truncate" > w3wiki 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/