How to keep linked phone number from breaking line on iOS?

Question

I'm working on a website that is set up to be a responsive design that gracefully transforms according to the size of the screen it's viewed on.

With iOS, I'm noticing that whenever I display the business phone number in an excerpt that displays underneath a slideshow element, the anchor tag that iOS automatically inserted causes a line break just before showing the phone number. See this screenshot for detail.

Sorry, but I have NO rendered source code to show this as iOS doesn't expose that via any kind of "view source" feature. If there is a way to show my source as rendered on iOS, please let me know.

I do have the pre-rendered CSS that, based on screen size, triggers the right line spacing between the break and the text above it, but it has been difficult to find a balance between line spacing and positioning. Here is that code:

First, for "normal" screens:

.content .genesis_responsive_slider .slide-excerpt {
    background-color: #222;
    filter: alpha(opacity=0);
    height: 8%;
    width: 100%;
    margin: 0;
    padding: 0px 0px 0px 4%;
}

Next for "mobile" screens lte 480px wide:

@media only screen and (max-width: 480px) {

     .content #genesis-responsive-slider .slide-excerpt {
         font-size:inherit;
         height: 24%;
         padding:4% 0 0 0;
         line-height: .5rem;
     }

}

Is there a way to prevent that anchor text line break on small iOS screens?

Answer 1

I just encountered this same issue for a project I'm working on. I found this answer that solved it for me: https://stackoverflow.com/a/4056764/1778696

All you do is add this in the head

<meta name="format-detection" content="telephone=no">

and then add this to your phone numbers to keep them clickable as phone numbers

<a href="tel:123-456-7890">123-456-7890</a>