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

cssselector {
  overflow-wrap: break-word | normal;
}

Values

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):

html<div id="elem">
  Lorem ipsum dolor sit amet
  vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
  consectetur adipiscing elit.
</div>

css#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):

html<div id="elem">
  Lorem ipsum dolor sit amet
  vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

See also