Bootstrap 5 Text Truncation
Last Updated :
16 Jan, 2023
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" >
< 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/
Share your thoughts in the comments
Please Login to comment...