HTML Hyphen and Word-Break Control
Web browsers usually do fine when it comes to hyphenating content at word breaks — until an unusual situation arises.
Word breaks in this article means words that break at the end of a line of text — the beginning of the word is published at the end of the line and the ending of the word is published at the beginning of the next line.
Unusual situations include narrow columns, extra long words, and words that should not break at their hyphen.
There are several simple things you can do that give you more control over what browsers do with your content when it comes to hyphens or lack thereof. Every method mentioned in this article is included in a box with examples near the end of the article.
The following are in addition to the regular keyboard hyphen.
-
A non-break hyphen that should not allow a word break.
-
A soft hyphen, a hyphen that appears only when a word breaks right there.
-
A hyphenless word break.
Without any of the above, the browser hyphenates according to its defaults and user-specified preferences.
Generally, words that would exceed the available line length are either (i) brought down to begin the next line or (ii) broken onto two lines with a hyphen where the break occurs.
You are familiar with the keyboard hyphen, often referred to as the minus sign. Unless told otherwise, the browser uses that character as a key for where to break a word when it would extend the line too far. If the word has no hyphen, the browser may break the word and insert a hyphen character.
If you do not want the word to break at a hyphen, the HTML entity − can be used instead of the keyboard hyphen/minus sign. The − entity prints a hyphen/minus sign that in some word-processing software is called a non−breaking hyphen. The browser will not (or should not) break a word at the − symbol when it is used within a word.
If a word has no hyphen, you may use the HTML entity ­ to direct the browser where to break the word and insert a hyphen if it extends past the end of a line. The ­ entity prints a hyphen/minus sign that in some word-processing software is called a soft hyphen, when words are broken at end of lines. The ­ entity clues the browser where the word should be broken and a hyphen inserted.
If a word has no hyphen, and it must not have any, you may use the HTML element <wbr> to direct the browser where to break the word and not insert a hyphen if it extends past the end of a line. The <wbr> element clues the browser where the word should be broken without inserting a hyphen.
The box below has an example of each option mentioned in this article. The word with many hyphens ("after-the-definite-will-of-the-people-makes-itself-heard") has its hyphens changed for each type in the example.
Hyphens & Word Breaks
Keyboard hyphen/minus ("-") symbol
Therefore, after-the-definite-will-of-the-people-makes-itself-heard, do this.Therefore, after-the-definite-will-of-the-people-makes-itself-heard, do this.
− HTML entity (non−break hyphen)
Therefore, after−the−definite−will−of−the−people−makes−itself−heard, do this.Therefore, after−the−definite−will−of−the−people−makes−itself−heard, do this.
­ HTML entity (soft hyphen)
Therefore, after­the­definite­will­of­the­people­makes­itself­heard, do this.Therefore, afterthedefinitewillofthepeoplemakesitselfheard, do this.
<wbr> word-break HTML element (hyphenless word break)
Therefore, after<wbr>the<wbr>definite<wbr>will<wbr>of<wbr>the<wbr>people<wbr>makes<wbr>itself<wbr>heard, do this.Therefore, after
The hyphen and word-break control options can be used to indicate where words should or should not break at the end of lines and whether or not a hypen is published at the word break;
(This article first appeared in Possibilities newsletter.)
Will Bontrager
