Hyphenation can introduce hyphens into a URL or file path when breaking it across multiple lines. It will be unclear, however, whether or not the hyphen is meant to be part of the URL or file path. The guidelines I follow are primarily inspired by the ones in the Yahoo! Style Guide (now archived):
Do not add hyphens when breaking. It is unclear whether or not a hyphen at the end of the line is part of the URL or file path.
Do not break after hyphens. A hyphen at the end of a line is problematic, for aforementioned reasons, but a hyphen before the end of a line is unambiguously part of the URL or file path. Break before hyphens, and move the hyphen to the beginning of the line.
Break before punctuation that can be interpreted as the end of a URL. This includes slashes and periods. Breaking before such punctuation gives a clearer indication that the URL continues onto the next line.
Break after other kinds of punctuation.
In HTML and CSS, set URLs and file paths to never break, with hyphens: never
. Convert hyphens to non-breaking hyphens, and spaces to non-breaking spaces. Manually insert the empty <wbr>
(word break) element at word-break opportunities, i.e., before slashes, periods, and hyphens. <wbr>
creates word breaks without hyphens, which is ideal for URLs and file paths. For more details, refer to the hyphens CSS property reference on MDN, or the wbr
HTML element reference on MDN.
This web site follows these guidelines. For example: ~
This might look weird, and be at odds with grammar rules, but Grammar must serve communication.