Line break on mobile phone only

Question

I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.

So how can I create a line break that will only work on a mobile device sized screen?

I am not very experienced in coding, so please be specific :) Thanks a lot for any help!

Jujitsu

You are asking us to be specific, yet you are not specific at all. What technologies are you using? What mobile are you testing with? What did you try, where is your code? – Supplicatory

Answer 1

Why not just do a line break as a class in the
tag?

<br class="mobile-break">

and in CSS

    @media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
    }

Malt

this is GENIUS!! – Tatia

works brilliantly!! EXACTLY WHAT I GOOGLE AROUND FOR!!!!! – Audsley

Answer 2

If you use Bootstrap 4 just use the break like this:

<br class="d-md-none">

Abie

Answer 3

You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally. You can then use a media query to display the line break at specific mobile screen sizes, for example:

.br-on-mobile {
    display: none;
}

@media screen and (<Your conditions here>) {
    .br-on-mobile {
        display: static;
    }
}

EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle

EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.

You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.

Undertrick

Thanks a lot for the answer. But I can not really make it work. I use this code: <strong>Gratis Rådgivning</strong><br /> <span>Før, under, efter parforholdet<br /> Ring på <span style="color: #ffffff;"><span style="font-weight:bold"><a href="tel:[phone]"><span style="color:#ffffff"><br class="br-on-mobile"><strong>70 11 62 63</strong></a></span></span> + the CSS: max-width: 400px I would like to have the whole phone number to jump on the next line on mobile. But it doesn't? What do i do wrong here? www.mandecentret.dk – Jujitsu

In the Fiddle? That seems strange, when I run the code and resize the bottom right square to less than 400px wide the number jumps to a new line as expected. Are you resizing the Fiddle windows? – Undertrick

Yes the fiddle works as it should. But not when I copy the codes into the website. – Jujitsu

Have you changed the media query to match the dimensions of your mobile device? Currently if your screen is >400px wide then it wont apply the style. – Undertrick

Also, which browser/device are you using? – Undertrick

I just wrote 400px, shouldn't that work? It should do the line break on all mobile screens. I use different webbrowsers and Chrome and Huawei browsers on my mobile phone. And I just checked on my webbrowser and to my surprise I can see that Firefox do the line break well but Chrome and Safari doesn't. – Jujitsu

Ive just realised you need to include the following meta tag in your header: <meta name="viewport" content="width=device-width, initial-scale=1"> This will scale the content to your device properly. – Undertrick

Sorry, I switched FF and Chrome. Chrome does it correct. I should add that on my mobile phone in 2 browsers, the text is not center aligned. It's only when I resize my webbrowser chrome window as small as possible, that I see it as it should be. – Jujitsu

Thank you I just tried to add this in the header: <meta name="viewport" content="width=device-width, initial-scale=1">, but no change :( – Jujitsu

In which case I am stumped. It works in Chrome and FF for me, all I can suggest is that you increase 400px to something much larger as a test just in case your mobile browser width is >400px. – Undertrick

Are your media queries applying correctly? When you resize the screen to <400px wide do the new styles appear in whichever web dev tools/inspector you use? – Undertrick

Yes, I can see them with Firebug. I don't know why it's not working, but thanks a lot for your help anyway. – Jujitsu

This solution worked perfectly for me. Thank you, Sam! – Garibay

Answer 4

If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):

<br class="md:hidden">

Weihs

Answer 5

Instead of space between the number, add   this is non-breaking space which will prevent a new line being added.

Satrap

Answer 6

This should work on BULMA: <br class="is-hidden-desktop" />

Sacring

What part of his question mentions anything about BULMA? – Parrish