Bootstrap 5 Text Word break
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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success text-center" > w3wiki </ h1 > <!-- Bootstrap Text Break classes used --> < u >Text Break Used</ u > < p class = "text-break" > A Computer Science Portal for Beginner, 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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-2" > < h1 class = "text-success text-center" > w3wiki </ h1 > < u >Text Break Used</ u > < p class = "text-break" > A Computer Science Portal for Beginner, 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 Beginner, 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
Contact Us