Simple Code, Pretty Results: How to Correctly Wrap Text With HTML!

If you work with web development, you already know the character " ", which means “Non-breaking space” and it is used to fill out HTML tag empty spaces. In practice, do you really use it? 

Today, I will show how to wrap text using the   character. 

Let's say you are creating a website with a desktop and mobile version, for example:

Code

<div class="block-form">
  <h2>
    Fill out the form with your personal data and we will contact you! 
    Or you can call us: 
    <span class="phone">0800 3000 9974</span>
  </h2>
  <form>...</form>
</div>

Result  

Wow! Great! Apparently, all the code was correct. But, if you observe, the phone number in mobile version is not in the correct format. The mobile phone is wrapping the text, but the best way is to keep the phone number all on the same line. 

Wrong Solution

In this case, our first reaction is to add a tag “<br>”, before the beginning of the number:

<div class="block-form">
  <h2>
    Fill the form with your personal data and we will contact you! 
    Or you can call us: 
    <br><span class="phone">0800 3000 9974</span>
  </h2>
  <form>...</form>

Fantastic! The mobile version looks perfect! But the desktop version…  

In this case, developers identify the problem and create code blocks to solve it. Most of this code will work, but it's unnecessary. 

Correct Solution

The best way to solve this problem is pretty simple. 

Use the powerful character “&nbsp;”. This allows us to inform the browser that blank spaces exist between the blocks of numbers, but it should be altogether in the same line.  Like this:

<div class="block-form">
  <h2>
    Fill the form with your personal data and we will contact you! 
    Or you can call us: 
    <span class="phone">0800&nbsp;3000&nbsp;9974</span>
  </h2>
  <form>...</form>

Yeah! Now it is perfect, in both versions.