# word-break property

The `word-break` property allows you to move the letters of a long word to a new line if this word does not fit into the width of container.

## Syntax

`selector { word-break: break-all | keep-all | normal; }`

## Values

Value | Description
--- | ---
`break-all` | Causes long words to wrap on a new line if that word does not fit in container.
`keep-all` | To break hieroglyphs.
`normal` | Standard behavior: if a long word does not fit the width of container, it will simply crawl outside its border (and start on a new line).

Default value: `normal`.

## Example . The normal value

In this example, a very long word will not fit into container and will fall outside its boundaries (and will start on a new line):

`<div id="elem"> Lorem ipsum dolor sit amet vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword, consectetur adipiscing elit. </div>` `#elem { width: 200px; word-break: normal; border: 1px solid red; }`

:

## Example . The break-all value

And now those letters that did not fit will simply be moved to the next line:

`<div id="elem"> Lorem ipsum dolor sit amet vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword, consectetur adipiscing elit. </div>` `#elem { width: 200px; word-break: break-all; border: 1px solid red; }`

:

## See also

- the `overflow-wrap` property
  that also allows you to wrap the letters of a long word to a new line
- the `hyphens` property
  that enables hyphenation of words by syllables
- the `overflow` property
  that cuts off parts that extend beyond the block boundary
- the `wbr` tag
  that implements soft hyphens using HTML
- the `br` tag
  with that you can force text to wrap on a new line

← →
↑
en ru