This CSS property specifies how words should break at the end of the line. It defines the line break rules. Using this property, the lines that don't fit in the content box will break at a certain point.
Syntax:
word-break: normal| keep-all| break-all| break-word| initial| inherit;
The standard setting for this attribute is normal, which is applied automatically in the absence of a specific value declaration.
CSS Word-Break Values
- Normal: It is the default value that allows word breaks only at breakpoints, such as hyphens and spaces.
- Keep-all: It breaks the word in the default style. It shouldn't be used for Japanese/Chinese/Korean (CJK) text.
- Break-all: It inserts the word-break between the characters in order to prevent the word overflow. When this value is applied, the browser will break the lines at any point. It can break the word from the middle if it is too long to fit and comes at the end of the line. It does not apply hyphens.
- Break-word: It is used to break the word when it reaches the end of a container.
- Initial: It sets the property to its default value.
- Inherit: It inherits the property from its parent element.
Examples of CSS Work-Break
To effectively grasp the concept of CSS word-break, we will demonstrate the usage of all available CSS word-break properties in the upcoming examples.
Example 1:
In this instance, we will be employing the "standard" setting of CSS word-break.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS word-break: normal</title>
<style>
.box {
width: 150px;
border: 2px solid red;
word-break: normal;
}
</style>
</head>
<body>
<h2>Example to demonstrate the CSS word-break: normal</h2>
<div class="box">
This text will be BrokenAtSpacesAndHyphens, and if there are no suitable breakpoints, then the word may overflow the container. This text should not break within the word because 'word-break' is set to 'normal'.
</div>
</body>
</html>
Output:
Example 2:
In this instance, we will be utilizing the "keep-all" setting of CSS word-break.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS word-break: keep-all</title>
<style>
.box {
width: 150px;
border: 2px solid red;
word-break: keep-all;
}
</style>
</head>
<body>
<h2>Example to demonstrate the CSS word-break: keep-all</h2>
<div class="box">
ThisIsALongWordThatWillNotBreakAtAll, even if the container's width is too narrow to fit the entire word. This text should not break within the word because 'word-break' is set to 'keep-all'.
</div>
</body>
</html>
Output:
Example 3:
In this instance, we will be utilizing the "break-all" setting of CSS word-break.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS word-break: break-all</title>
<style>
.box {
width: 150px;
border: 2px solid red;
word-break: break-all;
}
</style>
</head>
<body>
<h2>Example to demonstrate the CSS word-break: break-all</h2>
<div class="box">
This text will break at any characters when the box width is full and will fit the text within the container. This text may break as 'word-break' is set to 'break all'.
</div>
</body>
</html>
Output:
Example 4:
In this instance, we will be utilizing the CSS "word-break" property with the "word-break" value.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of the CSS word-break: break-all</title>
<style>
.box {
width: 150px;
border: 2px solid red;
word-break: break-word;
}
</style>
</head>
<body>
<h2>Example to demonstrate the CSS word-break: break-word</h2>
<div class="box">
If the text exceeds the width of the container, ItMayBreakTheWordAndPrevent the text from overflowing the container. This text may break if it overflows the container as 'word-break' is set to 'break word'.
</div>
</body>
</html>
Output:
Example 5:
In this instance, there are a total of four containers. The initial container's content is being styled with the normal value, the second container's content with the break-all value, the third container's content with the keep-all value, and the fourth container's content with the break-word value.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 450px;
border: 2px solid black;
text-align: left;
font-size: 20px;
color: blue;
}
.jtp1{
word-break: normal;
}
.jtp2{
word-break: break-all;
}
.jtp3{
word-break: keep-all;
}
.jtp4{
word-break: break-word;
}
</style>
</head>
<center>
<body>
<h2>word-break: normal;</h2>
<p class="jtp1">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science-related technologies easily. C# Tutorial always provides an easy and in-depth tutorial on various technologies.
</p>
<h2>word-break: break-all;</h2>
<p class="jtp2">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science-related technologies easily. C# Tutorial always provides an easy and in-depth tutorial on various technologies.
</p>
<h2>word-break: keep-all;</h2>
<p class="jtp3">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science-related technologies easily. C# Tutorial always provides an easy and in-depth tutorial on various technologies.
</p>
<h2>word-break: break-word;</h2>
<p class="jtp4">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science-related technologies easily. C# Tutorial always provides an easy and in-depth tutorial on various technologies.
</p>
</body>
</center>
</html>
Output:
Conclusion
In this tutorial, we explored the CSS word-break attribute, designed to manage text wrapping within containers when it overflows. We have examined instances of various CSS word-break options, such as default, keep-all, break-all, and break-word.