The overflow-wrap
property is used to specify whether line breaks should be inserted within strings which would otherwise overflow their content box. Before the CSS Text Level 3 specification, this property was known as word-wrap
.
This property is used to break long words which exceed their parent element's width. These long words can be some URL, user generated text or any arbitrary long string.
CSS
overflow-wrap: value;
Values
normal
: Lines break at normal break points like white spaces. This is the default value.
break-word
: Words may be broken at arbitrary points if there is no other acceptable break point in the line.
initial
: Sets the default value.
inherit
: Inherits value from parent element.
Example
See the Pen CSS overflow-wrap example by Aakhya Singh (@aakhya) on CodePen.
In the above example, giving overflow-wrap: break-word broke the long word assassinationofthewildinthewildforest which otherwise overflowed the parent element's container.
Browser Support
This property is supported in all the major browsers.