It’s not obvious from looking, but in the HTML below, “Hello world” will be on one line even though there’s not enough room for it to all fit within the constrained body width:

<body>
  Hello world
</body>

<style>
body {
  font-size: 20px;
  width: 80px;
}
</style>

This is because the whitespace between “Hello” and “world” isn’t a normal whitespace. It’s a non-breaking whitespace. Normally when we want to write a non-breaking whitespace in HTML, we can do this with &nbsp; (and for reading clarity, this is the approach I recommend).1 But you don’t have to explicitly type out &nbsp;. You can type a non-breaking white space using the macOS key combination OPTION + SPACE and it will result in the same thing. If you load up the above HTML document in Chrome and inspect it, you can see in the Elements tab that it implicitly converts the space between “Hello” and “world” to &nbsp;.


  1. Or, if you want an entire line to be forced onto a single line, or if your content is dynamically coming from a database or elsewhere, you could also use white-space: nowrap;. ↩︎