The 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;
}

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.

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;
}

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;
}