Difference between values of word-break 'break-all' versus 'break-word' in CSS

CSS | word-wrap: 'break-all' Vs. word-wrap: 'break-word': In this tutorial, we will learn about the difference between values of word-break 'break-all' versus 'break-word' in CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

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.

Purpose

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.

1. CSS word-break: 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;
}

2. CSS word-break: 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 to demonstrate 'break-all' versus 'break-word'

<!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>

Difference between word-wrap: 'break-all' versus word-wrap: 'break-word' in CSS

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.

CSS Examples »

How to remove iframe borders using CSS?

How to create a vertically scrollable div using CSS?