There are to the best of my knowledge only two non-breaking spaces: U+a0 (no-break space) and U+202f (narrow no-break space). However, there are other spaces in use, each with their own usage. For thousands separator, Unicode Standard 5.0 recommends using U+2009 (thin space), which—‘[u]nlike U+2002 to U+2008, its width may get adjusted in typesetting’—and therefore is the correct space to use, to get it to match well with any justifications made in the text. (It may also have other uses than as a thousands separator, but then we are delving into typography, which belongs in the design SO.)
The problem with this space is that it is defined as a breaking space, and you do not want to have word-break in the middle of a number. Is there any way to redefine a specific character to change how it acts, i.e. with a .number { } class? As far as I know, pseudo-elements cannot perform this task, nor can pseudo-selectors. Is there a way to accomplish this?
As of now, the only work-around I can think about is using <span class="thinsp" /> every time a space is needed, then defining the class to do as desired. Example:
HTML:
<p>
The Earth orbits the sun some 149
<span class="thinsp" />597<span class="thinsp" />
870 kilometres away from the sun. Given the speed of light, which is 299
<span class="thinsp" />792<span class="thinsp" />
458 metres per second, … … …
</p>
CSS:
.thinsp {
whitespace: nowrap
}
.thinsp::after {
content: "\2009";
}
But this yields absolutely horrid HTML if you’ve got lots of numbers you want to typeset well. Is there a way to instead redefine the very nature of U+2009 to not wrap at line-end?
There is no way to override the line-break behaviour of specific characters like that with HTML/CSS. I can think of three possible solutions for your problem:
white-space: nowrap like @CBroe suggested in the comments. For example: <span class="number">1 234</span>