How to Create a Non-Breaking Hyphen in HTML

How to Create a Non-Breaking Hyphen in HTML | June's Journal

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

CTL+SHIFT+SPACEBAR

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

CTL+SHIFT+HYPHEN

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:

<html>

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

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.

WHAT DO YOU THINK?

Tell me by typing a comment below.

6 Comments

  1. Nancy Man on Jun 9, 2015 at 7:03 am

    Exactly what I was looking for! Thanks.

    • June Wilson on Jan 18, 2017 at 12:23 am

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

      • mom_rox on May 24, 2017 at 11:27 am

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

        • June Wilson on May 24, 2017 at 7:17 pm

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

      • Leston Buell on Nov 26, 2017 at 11:07 am

        More than just one person! Thanks!

  2. Carrie L on Mar 17, 2021 at 8:41 am

    It took a while for me to find this answer this morning but you solved my problem too! March 2021! Thank you!

Leave a Comment