Use the wbr tags to represent path

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:

┌───────────────────────────────────────────────────────┐
| 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:

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:

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