Home »
CSS
Difference between values of word-break 'break-all' versus 'break-word' in CSS
Here, we are going to learn about the difference between values of word-break 'break-all' versus 'break-word' in CSS.
Submitted by Anjali Singh, on February 07, 2020
Definition:
What is the most fundamental element that comes to mind when you are considering to develop a web page? Words! If that was your answer, then pat yourself because you are already aware of what we are going to discuss in this article. The discussion here will revolve around the most basic aspect of web development that is "dealing with words". But what are we going to discuss about the words here? That property is known as word-break in CSS but we won't be discussing the word-break property rather the focus here is on the word-break property's values and which are Break-all and Break-word.
In this article, what we are trying to do is give web developers a better understanding of the Word-Break property based on its values. Learning about the property and the values that property upholds is equally important. As they say, incomplete knowledge is worse than no knowledge at all, therefore learning about the values of the word-break property is of the essence. Therefore, we will see the difference between the two values of the word-break property is CSS which are break-all and break-word.
break-all
The first and foremost value of the word-break property is the break-all value. This value as the name suggests helps in breaking words at any character and that again prevents overflow. Therefore, the sole purpose of this value as you would have already figured out is to break the component of a word so that overflow can be prevented. Not that tough to understand right? Well, implementation is also easy, go ahead and have a look at the example below.
Syntax:
element{
Word-break:break-all;
}
break-word
The last but not the least, the break-word value is used to prevent overflow but here word may be broken at arbitrary points. Again, the break-word value has similar characteristics but here the word can be broken at arbitrary points or simply put at any random point. This value is also not that tough to understand, so why don’t we move ahead and have a look at an equally easy example.
Syntax:
element{
word-break: break-word;
}
In the below example, you can see the difference between both the values of the property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.break-word {
width: 180px;
border: 1px solid #006969;
word-break: break-word;
}
.break-all {
width: 180px;
border: 1px solid #006969;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> break-word</h2>
<p class="break-word">This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
<h2> break-all</h2>
<p class="break-all">This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>
Conclusion:
Now, as you can see the outputs of these two values you might have gotten the gist about the differences between these two values and their behavior. Both the values appear to be the same but are very different when implemented which could be seen in the outputs above. So go ahead and try it out yourself. And if you face any difficulties, we are always available to help you at https://ask.includehelp.com/.
CSS Tutorial & Examples »