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=
"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">
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=
"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">
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