DEV Community

Ayobami Ogundiran
Ayobami Ogundiran

Posted on • Edited on

1

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay