How to Create a Non-Breaking Hyphen in HTML

4 11030

I was working on a chart today for a SharePoint project.  Essentially I was entering names onto a table on a web page.  One person’s last name was hyphenated.  And it kept wrapping to the second line.   What I needed is what’s called a non-breaking hyphen in order to keep the whole last name on the same line.

A non-breaking hyphen is exactly what the name suggests. It allows you to type a hyphenated word without the word breaking at the hyphen.  It’s very similar to a non-breaking space.

I knew the keystroke to produce a non-breaking space, which is


or in HTML, a non-breaking space would be


But I didn’t know the code for the non-breaking hyphen.

I came across the code online after some searching, so thought I would share it as well for others searching.  To create a non-breaking hyphen in HTML coding, you want to use this:


And if you are curious what keystroke does this, it’s


You’ll probably only need to use something like that maybe once or twice or year.  But nonetheless, those times come.

Additionally, there’s some alternative CSS you can add to your web pages to make sure that no hyphens allow breaks:


<style type=”text/css”>
p.nobreak { white-space:nowrap;}
<p>Marsha Williams-Harris</p>

Some HTML editors allow you to configure the options or settings to disallow hyphens from breaking in a word, similar to how Microsoft Word has such a setting.  But if you needed to know how to do it in raw HTML like I did today, there ya go.

If anyone knows where SharePoint has a setting to configure this globally for the whole Sharepoint site, please advise.

  • Exactly what I was looking for! Thanks.

    • You’re welcome! One person finding this info useful made blogging on this worth it!

      • mom_rox

        Well, I hope I just made it doubly worth it. Thank you for posting it.

        • @disqus_Zar4PBZ62c:disqus, excellent! You have just encouraged me to share even more. Thank you for your comment.