Want to include a range of numbers or a multi-part word without having your creation split at the end of a line? Find out here how to insert a non-breaking hyphen ( ‑ ) in an HTML document.
First, Set a Timer for One Minute
With the timer set to 60 seconds, start an action—an unwelcome one perhaps, say hanging laundry, watching TV, or polishing silverware.
Stop as the timer goes off. Are you surprised how much fits into a measly minute? I always am and leave with a fresh appreciation for action in time.
Now that you’ve earned a break, let’s turn to a character that, well, never has one:
How to Use a Non-Breaking Hyphen ( ‑ ) in HTML Source Code
Time needed: 1 minute
To insert a non-breaking hyphen in HTML source code:
- Enter
‑Alternative: You can also use the hexadecimal code
‑.
Example:<p>See the figures on pages 15‑28.</p> - Use
content: "\2011"in CSS to produce a no-break hyphen.Example:
hyphen { content: "\2011"; }
Pseudo-element: See below for a CSS pseudo-element example with a non-breaking hyphen.
Example: Non-Breaking Hyphen using CSS
You can use the CSS content-property and a pseudo-element to format phone numbers in HTML with non-breaking hyphens, for example:
<style>
.no-break::before {
content: '\2011';
}
</style>
<p>Give us a call at 1<span class="no-break">555</span><span class="no-break">329</span><span class="no-break">8993</span>.</p>for
Give us a call at 15553298993.
How to Use a Non-Breaking Hyphen ( ‑ ) in HTML: FAQ
Can I also use the Unicode character directly?
Yes.
In documents that use Unicode (UTF-8, UTF-16, or UTF-32) encoding, you can insert the non-breaking hyphen directly as a character instead of using the encoding:
- Mac: How to Insert the Non-breaking Hyphen on a Mac
- Windows: How to Enter a Non Break Hyphen on Windows
Where should I use the non‑breaking hyphen?
Use the no-break hyphen whenever you want the line to break after any hyphen or en-dash.
This applies primarily to two cases:
- Use the non-breaking hyphen to mark a range of values.
Example: This is the perfect attraction for children aged 3‑103.
En-dash: While the (slightly longer) en-dash (–) is the correct character to use for ranges of numbers, no non-breaking version of it exists. For this reason alone, use the non-breaking hyphen instead. - Insert a non-breaking hyphen when you want to make sure a multi-part word or adjective is not split.
Example: High‑school students‑to‑be over‑use multi‑part non‑breaking word‑hyphenations.
Can I copy and paste the non-breaking hyphen codes?
Yes.
Use the following to copy the no-break hyphen codes for use in your HTML documents:
Non-breaking hyphen for HTML: ‑ | |
Non-breaking hyphen (Hex): ‑ |
(How to use a non-breaking hyphen in HTML source code updated December 2023)