Text Word break is used to break the long string. Prevent long strings of text from breaking your components’ layout by using text-break. This class is deprecated because a line break is not possible in Arabic, and the most used RTL language is Arabic.
Bootstrap 5 Text Word break Class:
- text-break: This class is used to break the line.
Syntax:
<tag class="Text Word Break">...</tag>
Note: This class is deprecated.
The below examples illustrate the Bootstrap 5 Text Word break:
Example 1: In this example, we use the text-break class.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success text-center" >
Geeksforgeeks
</ h1 >
<!-- Bootstrap Text Break classes used -->
< u >Text Break Used</ u >
< p class = "text-break" >
A Computer Science Portal for Geeks,
here we learn,teach together.
Helping each other is the moto of
us so we can grow togther.
</ p >
</ body >
</ html >
|
Output:
Example 2: In this example, we will have two texts one will hold the text-break class another one will be normal.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
</ head >
< body class = "m-2" >
< h1 class = "text-success text-center" >
Geeksforgeeks
</ h1 >
< u >Text Break Used</ u >
< p class = "text-break" >
A Computer Science Portal for Geeks,
here we learn,teach together.
Helping each other is the moto of
us so we can grow togther.
</ p >
< u >Text Break Not Used</ u >
< p >
A Computer Science Portal for Geeks,
here we learn,teach together.
Helping each other is the moto of
us so we can grow togther.
</ p >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/text/#word-break