HTML space between words on the same line

You cannot add more than one white space between HTML words. Even if you add more than one space, the browser will collapse all the spaces and display them as a single whitespace. So, if you want to add more than one space in HTML then you have come to the right place to learn it. In this article, I will tell you how to add HTML space between words on the same line. I have three easy solutions for adding extra space between words in HTML.

If you use the <br> tag to add space between words your words will display on the next line, So you should not use the <br> tag. No elements allow more than one space to be added. Even if you add multiple spaces, the browser will convert it to a single space. For example, see the below image, I have added multiple spaces in HTML <p> tag but only a single space is displayed in the result.

3 methods to add HTML space between words

1. Non-breaking space

All elements allow non-breaking space. If you use a single space code twice, it will be displayed as a double space. If you write content without using any tags, your space will be changed into “&nbsp;” automatically in the backend.

• The Code “&nbsp;” to add a single white space.
• The Code “&ensp;” to add Double white spaces.
• The Code “&emsp;” to add Four white spaces.

Code:

<h1> Hello&nbsp;Everyone </h1>
<h1> Hello&ensp;Everyone </h1>
<h1> Hello&emsp;Everyone </h1>

Result

2. HTML <pre> tag

You can easily add multiple spaces in HTML using pre-tag. The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements. This tag is the only one that allows multiple spaces, even if you add multiple whitespaces between words, it will display correctly. So you don’t need to add any code like the first method. To add multiple spaces in the heading you need to add <h1> tag inside <pre> tag and give your content inside it as shown in the below code:

<pre><h1>Hello     Everyone</h1></pre>

Result:

3. CSS word-space property

Use the “word-space” property in CSS to control the spacing between words of all content in an element. You must give your space as the value of the word-space property.

Code:

<span style="word-spacing: 15px;"> 
Hello welcome to wonder develop</span>

Result: