Prevent H1 tag from breaking to new line

Either use CSS:

#logo h1 {
    white-space: nowrap;
}

or change your title's text:

<h1>VoIP&nbsp;Innovations</h1>

  is a HTML entity for a "non-braking space". I would be inclined using it since all browsers support it.

This worked for me with BootStrap 4

<h2 style="display:inline">ABC</h2><h3 style="display:inline">abc</h3>

The style="display:inline" had to be in both neighboring H tags for it to work.

If you want to prevent your h1 to break into multiple lines, you can use the following statement:

h1 { white-space: nowrap; }

This only works in browsers which support CSS3 and you may have to set an overflow property on the containing element.

I do think you may want to look for a different solution to this issue. Your h1 is simply too big for your header on small screens.

Using @media queries in your CSS files, you can either display the two divs below each other or reduce the font size on smaller screens.

Use white-space:nowrap; to achive what you are looking for.

For Instance,

#logo h1 {
   white-space: nowrap;
   }

Related