Prevent a Phone Number from Wrapping to a New Line in CSS HTML

Problem: You’re trying to put your business phone number on your website, but part of the phone number wraps to a new line making it hard to read.

Example of a phone number wrapping in html css — As you can see, the right hand portion of the phone number is wrapping to a new line.

Thankfully, there’s a simple CSS class that will fix your problem.

The solution is extremely simple, wrap your phone number with a span tag and set the style of the white-space attribute of that span tag to be nowrap.

Here is example code that you can use:

<span style="white-space: nowrap;">
     <a href="tel:+12345678900">1 (234) 567-8900</a>
</span>

Adding the CSS nowrap attribute results in:

Now the phone number no longer wraps — Much better, the text now behaves in the way we would expect it to.

Creating a NoWrap Class in Your Style Sheet

A really simple way to work around this would be to create a nowrap class, place it’s attributes into your style sheet, and then applying the class to HTML elements that you don’t want wrapping around.

Tip: You may want to double check your existing style sheet to verify that it doesn’t already have one, as many designers know that these reusable styles are very useful.

This code goes in your HTML file:

<span class="nowrap">
     <a href="tel:+12345678900">1 (234) 567-8900</a>
</span>

This code goes in your CSS file:

.nowrap {
  white-space: nowrap;
}

Creating a NoWrap Class in Your Style Sheet

Read More From Actual Wizard