Search code examples
reactjsmedia-queriesstyled-components

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:

enter image description here

Here is the line breaking:

enter image description here

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>