# overflow-wrap property

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

## Syntax

`selector { overflow-wrap: break-word | normal; }`

## Values

Value | Description
--- | ---
`break-word` | Causes long words to wrap to a new line if the word does not fit in container. The word will start on a new line.
`normal` | Standard behavior: if a long word does not fit the width of container, it will simply fall 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 the 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 { word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; }`

:

## Example . The break-word value

And now those letters that did not fit will simply be moved to the next line (and the long word will still start on a new line):

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

:

## See also

- the `word-break` property
  that also allow you to move the letters of a long word to a new line
- the `word-wrap` property
  that is a deprecated name for the overflow-wrap property
- the `hyphens` property
  that enables hyphenation of words by syllables
- 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