How to Add a Non-breaking Space using in HTML?

Last Updated : 25 Jun, 2024

In HTML, the non-breaking space character, represented by  , is used to control the spacing and formatting of text content. Unlike regular spaces, which browsers typically collapse into a single space,   ensures that multiple spaces are preserved. This feature is essential for maintaining consistent spacing and preventing unwanted line breaks, which can disrupt the layout of a webpage.

Add Non-breaking Spaces in HTML with  

The browser displays only one blank space even if we put hundreds of spaces in our code. However, HTML provides the   character entity to overcome this limitation.
By inserting   between words or elements, you can prevent line breaks from occurring at specific points, ensuring that certain content stays together on the same line.
By inserting   between words or elements, you can display multiple blank spaces and prevent line breaks from occurring at specific points, ensuring that certain content stays together on the same line.

In some cases,   is used as a placeholder within HTML elements that cannot have content, such as <td> elements in tables or <button> elements. This ensures that these elements are not collapsed or ignored by the browser.

Example: The example below shows how to Add a Non-breaking Space with the &nbsp.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-breaking Space Example</title>
</head>

<body>
    <p>This is a non-breaking space example.</p>
    <p>This&nbsp;is&nbsp;a&nbsp;non-breaking&nbsp;space&nbsp;example.</p>
    <p>
        Non-breaking&nbsp;space&nbsp;can&nbsp;be&nbsp;used&nbsp;
        to&nbsp;maintain&nbsp;spacing&nbsp;between&nbsp;words&nbsp;
        or&nbsp;elements.
    </p>
    <p>
        This&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;&nbsp;a&nbsp;&nbsp;&nbsp;
        line&nbsp;&nbsp;&nbsp;with&nbsp;&nbsp;&nbsp;multiple&nbsp;&nbsp;&nbsp;
        non-breaking&nbsp;&nbsp;&nbsp;spaces.
    </p>
</body>

</html>

Output:

Understanding and utilizing the non-breaking space character ( ) in HTML is important for web developers aiming to maintain precise control over text spacing and formatting. This simple yet powerful to prevent unwanted line breaks, ensure consistent layout, and enhance the overall readability of your content. Whether you're dealing with table cells, button elements, or any text content,   provides a reliable solution for achieving the desired appearance and functionality of your web pages.