DEV Community

Ayobami Ogundiran
Ayobami Ogundiran

Posted on • Updated on

HTML SPACE or HTML ENTITY: How to create non-breaking Space in HTML.

It seems you want to create texts with spaces in between like this "This is Ayobami" or you want to move a text to the next line and you have realized pressing the spacebar or the return key has no effect.

That can be very confusing for a beginner that just started learning web development.

In this tutorial, I will show you how to do it -- the ugly and the loving ways.

&nbsp: nob-breaking space

To create extra spaces before, after, or in-between your text, copy the   (non-breaking space) extended HTML character and paste it wherever you need a space. That means you have to paste it times the number of spaces you want. E.g "My name is     Ayobami" -- two spaces created.

How to do it with CSS

You can simply wrap the word you want to space with a span tag and use CSS padding to space it a bit as in:

"My name is Ayobami

.two-spaces {
padding-left: 5px;
}

You can add padding size you want ( greate or lesser than 5px).

b:line-breaking space.

Whenever you want to move a text to the next line in HTML, you can just tag before the text. For example, if you want "Ayobami" in the text below to go to the next line, we just have to add
before it as in:

HTML: "My name is Ayobami".
Result: " My name is
Ayobami" (Ayobami is now in another line).

That is it. Goodluck!

Subscribe to my news-letter to always get my tutorials in your inbox: You Too Can Code

Discussion (0)