Abhor the sight of a range of numbers or a multi-part word split awkwardly at a line’s end? Not only does that look bad, it can confuse readers. Find out here how to insert a non-breaking hyphen ( ‑ ) in an HTML document to keep your content neatly laid out and unbroken.
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.
Their word:
Word-breaking hyphens: How to Suggest Hyphenation in HTML and CSS
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.
Hyphens unbroken?
Tips help fuel these email and tech how-tos.
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): ‑ |
(First published November 2021, last updated November 2025)