CSS overflow-wrap

The overflow-wrap property in CSS is used to specify whether or not a string of text can be broken apart to prevent text from overflowing its container.

By default, long words or strings of text will overflow the container and extend beyond its boundaries. Using the overflow-wrap property, you can tell the browser to break the string of text at any point to prevent overflow.

Syntax


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

The values for the overflow-wrap property are:

Examples

Result:

Thisisaverylongwordthatwilloverflowthecontainer

Thisisaverylongwordthatwillnotoverflowthecontainer