vs white-space:nowrap

Question

I will admit that I have a habit of using   between words when I don't want them to break (table headers for example).

Should I really style my element with white-space:nowrap? Are there any advantages/disadvantages to either if the only thing I am looking to do is keep words from wrapping?

Pileup

But, as with all elements in HTML, isn't this a 'right tool for the right job' situation? – Exterminate

While I can't think of an example offhand, it seems that there would be many situations where a single, best-practice solution would apply. – Pileup

If you can't think of an example off hand then you're asking a theoretical question and not a question about a problem you're facing. Making this a bad fit for SO based on the FAQ. – Partnership

@BenjaminGruenbaum: I can't think of an example was a response to another comment. The comment section is entirely separate from the question, so how, exactly, does my comment affect the content of my question? Also, there is nothing "theoretical" about my question. It seeks a valid solution the problem of deciding which is the most flexible non-wrapping option to choose in today's diverse world of browsers. – Pileup

One of my concerns was whether markup littered with <span>s would have any semanticity or accessibility issues (e.g., with screen readers). If a <span> by default is purely presentational, which I think is the case, there really shouldn’t be any problems with using it. I used to add  s here and there to avoid line breaks in undesirable places, but now I’m probably switching to <span>s. – Cauley

For full control it may be worth to look into discretionary line breaks, if such an entity exists at all in HTML… – Cauley

Answer 1

There are cases where nonbreaking space cannot help:

• the word contains a hyphen (e.g. web-developer);
• hyphens: auto is used for the container element to do hyphenation automatically.

In these cases, white-space: nowrap is useful. Also, nonbreaking space works regardless of whether styles are applied to document while CSS rules solely work when styles are enabled.

Lattimer

Hmm. Then nbsps and other character entities would be very useful for plain HTMLs if CSS is disabled or not loaded for some reason. – Sculpturesque

Answer 2

white-space:nowrap has several advantages

1. It can be applied globally to all matching text elements. If you put this in a class or apply it to all spans then you don't need to add/remove   in all files.
2. It makes the html easier to read compared to having a bunch of html entities. It also allows your source code to be wrapped to the next line without messing anything up (a   at the end of a line renders as 2 spaces).
3. It can be applied to elements that would be hard/impossible to replace the spaces with  . For example in react <span style={{whiteSpace: 'nowrap'}}>{myValue}</span> works fine without needing to edit the value. This is especially useful for react since it will escape any html entities (and using a unicode non breaking space is very anti-human readable).
4. It can be used for text that doesn't have spaces but has hyphens. white-space:nowrap also trumps hyphens: auto, overflow-wrap: anywhere, and word-break: break-word although you shouldn't have contradicting style.
5. Whether or not to word wrap is within the scope of styling not document structure therefore white-space:nowrap is more proper than   in the same way that CSS is preferred over <b>.

Photogrammetry