Hyphenation is breaking a word at the end of a line with a hyphen (a.k.a. dash). Hyphens are also used in a compound adjective. e.g. “She has lovely blue-green eyes.”
Other similar characters are the em dash—, en dash–, and minus−.
Since I’m on the topic, en dashes are used in place of the word “to” or in a compound adjective where one of the items is two words.
Em dashes are used to set off a phrase that has a lot of commas in it, or for an abrupt change in thought. For example: “I will be taking the New York–Berlin flight from 1–9:00 p.m. The conference covers neurological impulses of rats—if I could only apply it to real life...”
The minus, of course, is used to indicate negative values or subtraction.
The HTML entity values are:
| Dash type | Entity | Example |
|---|---|---|
| en dash | – | – |
| em dash | — | — |
| minus | − | − |
| hyphen | none; just use the dash key on your keyboard | - |
<html lang="en">
…
p {
text-align:justify;
-webkit-hyphens: auto; /* As of Jan. 2012 these prefixes are still necessary */
-moz-hyphens: auto;
-epub-hyphens: auto;
hyphens:auto;
}
Note that text-align: justify is not necessary, but it is typically when you would use hyphenation. Specifying the language is kinda of a good idea so it knows which dictionary to use for hyphenation. :-)
When justifying the text, you can tell the browser where to break by using the CSS text-justify property. Ex: text-justify: auto; Honestly, just skip this property for English speaking websites because the default is auto, which is the correct one to use.
Since not all browsers support automatic hyphenation, you can put a ­ at every possible break point in every word. Yeah, this is a drag, but worth it at times. Use an online tool to help out, such as hypho-o.
Hex Code = ­ / Decimal Code = ­ / HTML Entity = ­
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
Hex Code = ​ / Decimal Code = ​ / HTML Entity = none
This is used in conjunction with a standard hyphen. Example: <p>The room features semi- This practice is not necessary for modern browsers so I’m guessing it must be a hack for IE. The bottom line is don't use it unless you absolutely must.
Hex Code = ‑ / Decimal Code = ‑ / HTML Entity = none
This is character is displayed as a standard hyphen, but the browser will not split the word if it is at the end of a line. Example: <p>I work at A‑ will display: I work at A‑B‑C Corp. Adjust the width of your browser window and you’ll notice that A-B-C won’t get split apart.