'Line break on mobile phone only

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!

Solution 1:^[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; }
    }

Solution 2:^[2]

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

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

Solution 3:^[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.

Solution 4:^[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">

Solution 5:^[5]

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

Solution 6:^[6]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Richard de Ree
Solution 2	shalunts
Solution 3
Solution 4	Dan M
Solution 5	Pixel Ninja
Solution 6	Kavin Mehta

'Line break on mobile phone only

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]