Stop text from breaking next line-CodePudding

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:

CodePudding user response：

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>

CodePudding user response：

Your solution is good, however you can use two span elements within the h1 and give them a display:block; and white-space: nowrap;

<h1>
  <span className="block whitespace-nowrap">The fastest way</span>
  <span className="block whitespace-nowrap">to finance NFTs</span>
</h1>