word-break: break-all vs word-wrap: break-word

#Difference

/* word-break: break-all */
┌───────────┐
| This is a |
| sample tex|
| t in a par|
| agraph.   |
└───────────┘

/* word-wrap: break-word */
┌───────────┐
| This is a |
| sample    |
| text in a |
| paragraph.|
└───────────┘

/* word-wrap: break-word */
┌─────────┐
| This is |
| a       |
| sample  |
| text in |
| a       |
| paragrap|
| h.      |
└─────────┘

#Good to know

1. `word-wrap` was a non standard and unprefixed Microsoft extension. It was renamed to `overflow-wrap`.
   However, `word-wrap: break-word` is identical to `overflow-wrap: anywhere`, not `overflow-wrap: break-word`.
2. A browser might break a long text at unexpected places. For example, the specific path (`/this/is/.../folder`) in the following text is placed at the second line:
   shell

   ┌───────────────────────────────────────────────────────┐
   | Copy file to the folder:                              |
   | /this/is/a/very/long/path/to/the/destination/folder   |
   └───────────────────────────────────────────────────────┘

   To prevent this behavior, HTML5 provides the `<wbr>` element. It stands for Word Break Opportunity, and is used to specify the positions that a line break would be created.
   Getting back to the example above. If we use `<wbr>` elements right before each path separator (`/`) as follow:
   html

   Copy your file to the folder: <wbr />/this <wbr />/is <wbr />/a ... <wbr />/destination <wbr />/folder

   The browser will break the paths in between the directory names:
   shell

   ┌───────────────────────────────────────────────────────┐
   | Copy your file to the folder: /this/is/a/very/long    |
   | /path/to/the/destination/folder                       |
   └───────────────────────────────────────────────────────┘

   Note that `<wbr>` element is not supported in IE 11 and earlier versions.