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

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.

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

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