In working with HTML, many of you have probably dealt with the issue of unsightly line breaks being inserted by the browser from word wrapping. Automatic word wrapping is usually quite predictable, happening when the browser meets whitespace or a hyphen. You can use special characters to control whether the wrap happens or not, e.g. a non-breaking space ( ) or a non-breaking hyphen (&#8209). But did you know that word wrap also happens at slash (/) characters?

For example, take a look at the following line:

I downloaded some software from Sourceforge today and saved it to /usr/local/system/subsystem/users/trusted/home/edward/files/software/downloads/.

Although dependent on the font settings in your browser, the display of the filesystem path "/usr/local/system/subsystem/users/trusted/home/edward/files/software/downloads/" is probably wrapped at an arbitrary slash. For clarity of meaning, it would be better if the file path did not wrap at any of the slashes.

Is there a character entity for a hard slash? I don't know of one. Fortunately, this problem can be fixed using CSS. The CSS style 'white-space: nowrap' will do the trick.

Here's what a simple inline statement would look like for the above example.

I downloaded some software from Sourceforge today and saved it to <span style="white-space: nowrap">/usr/local/system/subsystem/users/trusted/home/edward/files/software/downloads/</span>.

When viewed in a browser, it will look like:

I downloaded some software from Sourceforge today and saved it to /usr/local/system/subsystem/users/trusted/home/edward/files/software/downloads/.

The other way to fix this is by using the old <nobr> tag. While the <nobr> tag will work in most browsers, it is not a standard tag and therefore will not validate properly against html/xhtml validators.

The style property 'white-space: nowrap' also works for spaces, hyphens and other wrapping scenarios so it is a useful one to know.