# 
## Overview

**`word-break`** is a #key# CSS: Cascade Style Scaling #key# rule for words present in elements that are displayed on the browser.

# 
## When to use `word-break`

There are times when words or letters are broken when they reach the end of a line. 

You can use `word-break` to specify what happens when a word reaches the end of a line. 

# 
#  Properties of `word-break`

The possible values the `word-break` property takes are:

* `normal`
* `break-all`
* `keep-all`
* `break-word`

##
## Syntax

---
```CSS
word-break: value
```
---

The value in the code snippet above can be any of the aforementioned values.

#   
## 
### The `word-break: normal` property

The **`word-break: normal`** property sets the text to break based on the default settings. See the example below.

<html>
<head> </head>
<body>
  <div id="content" />
    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give
    you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
    master-builder of human happiness.
  </div>
</body>
</html>

#content {
      width: 100px;
      border: 3px solid black;
      word-break: normal
    }

codemirror

#   
## 
### The `word-break: break-all` property

The **`word-break: break-all`** property specifies that words should break at any character. See the example below.

<html>
  <head> </head>
    <body>
    <div id="content" />
      But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give
      you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
      master-builder of human happiness.
    </div>
    </body>
</html>

#content {
      width: 100px;
      border: 3px solid black;
      word-break: break-all
    }

#   
## 
### The `word-break: keep-all` property

The **`word-break: keep-all`** property is the same as the `normal` value, except that `word-break` shouldn't be used for #key# CJK: Chinese/Japanese/Korean #key# texts. 

See the example below.


<html>
  <head> </head>
    <body>
      <div id="content" />
        But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give
        you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
        master-builder of human happiness.
      </div>
    </body>
</html>

#content {
      width: 100px;
      border: 3px solid black;
      word-break: keep-all
    }

#   
## 
### The `word-break: break-word` property

The **`word-break: break-word`** property causes words to break in order to prevent overflow.

<html>
<head> </head>
<body>
  <div id="content" />
  But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give
  you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
  master-builder of human happiness.
  </div>
</body>
</html>

#content {
      width: 100px;
      border: 3px solid black;
      word-break: break-word
    }

What is word-break in CSS?

Word-break is a CSS property for controlling how words are broken at the end of a line. Values: normal, break-all, keep-all, break-word.

What is word-break in CSS?

Overview

When to use word-break

Properties of word-break

Syntax

The word-break: normal property

The word-break: break-all property

The word-break: keep-all property

The word-break: break-word property

When to use `word-break`

Properties of `word-break`

The `word-break: normal` property

The `word-break: break-all` property

The `word-break: keep-all` property

The `word-break: break-word` property