A non-breaking hyphen prevents a line break between words that are connected with a hyphen. It ensures that the word is not split across two lines. It helps in improving readability, consistent formatting across different devices, and improving accessibility factors. The “non-breaking hyphen” can also be used in “URL”, “Heading/Titles”, or “Tables Cell” etc.

This guide demonstrates how to use a non-breaking hyphen in HTML.

• • Using HTML Code
  • Using HEX Code
  • Bonus Tip: Using CSS Code

How to Use a Non-Breaking Hyphen in HTML?

The “non-breaking hyphen” is a special character which means it does not insert directly inside the HTML file. However, the HTML code and HEX code are utilized inside the HTML file. Both codes have a large number of supportabilities from the browsers and are quite easy to implement. Let us follow these ones:

Method 1: Using HTML Code

The HTML code or Entity numbers are utilized to insert symbols in the HTML file that are not available on the keyboard or a number of reserved words. The HTML codes are compatible across different browsers and have a high accessibility factor. Moreover, the usage of properly encoded characters helps in SEO and enhances readability.

The HTML code for the non-breaking hyphen is “‑”. Now, let us insert it in the HTML file in the below code block:

In the above code snippet:

• • First, the “<center>” tag is utilized to display all the residing elements at the center of the webpage.
  • Next, create a “<h1>” tag and utilize the HTML code of “&#8209;” for displaying the “non-breaking hyphen” on the webpage.
  • Also, set the value of “darkgoldenrod” to the CSS “color” property. It creates a visual difference from other HTML elements.

After the execution of the above code snippet, the webpage looks like this:

The above gif illustrates that a non-breaking hyphen has been inserted in the HTML file.

Method 2: Using HEX Code

The HEX code ensures consistency across different browsers and devices by providing better accessibility. The HEX code of the “non-breaking” hyphen is “%#x2011;”. Visit the below code for the utilization of the HEX code in the HTML file:

After the execution of the above code snippet, the webpage appears like this:

The output shows that the non-breaking hyphen has been inserted using HEX code and it is working perfectly.

Bonus Tip: Using CSS Code

With the help of a CSS code, the non-breaking hyphen can also be displayed on the webpage. The “:before” or “:after” CSS selectors are utilized to display the CSS code in the HTML file. The CSS code for the non-breaking hyphen is “/2011”. For a better explanation visit the below code block:

 
In the above code snippet:

• • The “h3” element is assigned with the “:before” CSS selector inside the “<style>” tag.
  • After that, the CSS code for the non-breaking hyphen has been placed as a value for the “content” property.
  • Also, the value of “darkcyan” is set to the “color” CSS property.

After the execution of the above code snippet, the webpage looks like this:

The output shows that the non-breaking hyphen has been created before the selected “h3” element.

Conclusion

In HTML, the non-breaking hyphen can be utilized using HTML codes, HEX codes, or CSS codes. The “HTML codes” and “HEX codes” place the non-breaking code directly inside the HTML file via “&#8209;” and “&#x2011;”, respectively. Using CSS, the “:before” or “:after” selectors are utilized along with the non-breaking hyphen CSS code “\2011”. This article has demonstrated how to use a non-breaking hyphen in HTML.