Break lines within words in order to prevent overflow. This can be useful to force wrapping of otherwise unbreakable strings, too long to fit within a containing box.
Syntax
overflow-wrap: normal | break-word ;
word-wrap: normal | break-word ;
normal - Lines only break at normal word break points.
break-word - Break words at arbitrary points if there are no otherwise acceptable break points in the line.
inherit - Inherit the property from a parent element.
Examples:
h1 { overflow-wrap: break-word; }
.emw3class { word-wrap: normal; }
#emw3id { overflow: scroll; }
Try it:
Text that includes a long url such as https://en.wikipedia.org/wiki/Progressive_enhancement#Introduction_and_background can cause problems with word wrapping, overflowing the box. |
Browser Support: word-wrap All major browsers. The alternate name overflow-wrap is supported in CSS 3
“Paper can't wrap up a fire” ~ Chinese Proverb
Related:
overflow - What happens if content overflows an element's box.
overflow-x - Whether to clip the left/right edges of overflowing content.
overflow-y - Whether to clip the top/bottom edges of overflowing content.
table-layout - How to layout table cells, rows, and columns.