This is a sample text in a paragraphdisplayed in a container that has limited width such as it can display 9 characters at maximum.
word-break: break-allwill try to fit maximum characters in each line as it can. So there are words which are split into different lines such as text and paragraph like that:
/* word-break: break-all */ ┌───────────┐ | This is a | | sample tex| | t in a par| | agraph. | └───────────┘
word-wrap: break-worddoes not break the words that are able to fit in each line. So the text and paragraph words are not split in different lines.
/* word-wrap: break-word */ ┌───────────┐ | This is a | | sample | | text in a | | paragraph.| └───────────┘
break-wordwill break long words that are not fit in each line.
/* word-wrap: break-word */ ┌─────────┐ | This is | | a | | sample | | text in | | a | | paragrap| | h. | └─────────┘
word-wrapwas a non standard and unprefixed Microsoft extension. It was renamed to
word-wrap: break-wordis identical to
overflow-wrap: anywhere, not
/this/is/.../folder) in the following text is placed at the second line:
┌───────────────────────────────────────────────────────┐ | Copy file to the folder: | | /this/is/a/very/long/path/to/the/destination/folder | └───────────────────────────────────────────────────────┘
<wbr>element. It stands for Word Break Opportunity, and is used to specify the positions that a line break would be created.
<wbr>elements right before each path separator (
/) as follow:
Copy your file to the folder: <wbr>/this <wbr>/is <wbr>/a ... <wbr>/destination <wbr>/folder
┌───────────────────────────────────────────────────────┐ | Copy your file to the folder: /this/is/a/very/long | | /path/to/the/destination/folder | └───────────────────────────────────────────────────────┘
<wbr>element is not supported in IE 11 and earlier versions.