Stop text from breaking next line

I am using React, styled-components, and media queries at the moment. I have 3 media queries at; 480px, 768px, 1200px – my text when scaling between these on a desktop does not hold the same structure.

I have an idea to use two styled components one for the first line of the title and one for the second and then make sure that each one has white-space: nowrap;. But, I am not sure that this is the best solution… Any suggestions?

Here is a visual example of what I am working with:

Here is the line breaking:

>Solution :

You can use the "non-breaking-space" HTML entity   instead of the regular spaces at the positions that should not break / should form a unit or line

h1 {
  width: 400px;
  margin: 0 auto;
  text-align: center;
  font-size: 60px;
  font-family: sans-serif;
}

<h1>The fastest way&nbsp;to&nbsp;finance NFTs</h1>