Is there a fixed-width space character that is not subject to expansion in a justified paragraph?

Question

Justified paragraphs expand inter-word spacing, but I expected   to be unaffected by this expansion. Unfortunately, it is affected, and so I need to find an unaffected space character (preferably one with the same width as an ordinary space in an ordinary left-justified paragraph). Any suggestions?

Answer 1

You could just add a character such as . and make it invisible.

It works. jsFiddle here

It is not parsed as whitespace, since it is technically a character that just isn't visible.

For a cleaner method, you could insert the character via the :after pseudo element..

span:after {
    content: ".";
    visibility: hidden;
}

jsFiddle here

Answer 2

The rendering of space characters other than SPACE and NO-BREAK SPACE is not defined in HTML specifications. In practice, various fixed-width spaces can be used, and they are not expanded in justification (effectively, they are treated as graphic characters, just with empty glyphs). The one that most closely matches a normal space in width is FOUR-PER-EM SPACE,  , but from the comments, it seems that you would rather want to use THIN SPACE or SIX-PER-EM SPACE.

Previously, browsers used to treat NO-BREAK SPACE as non-expansible, and some may still do, but for some odd reason, most browsers have abandoned this sensible idea. There is no guarantee that they won’t do the same to fixed-width space.

Apart from the theoretical point and the risk mentioned, fixed-width spaces suffer from font problems and breakability. The font problems mainly apply to old versions of IE, and the breakability (i.e., fixed-width spaces are treated as allowing a line break after them) could be addressed by using NARROW NO-BREAK SPACE if its width suits you and you take the risk with the font issue.

So it is probably best to do the spacing in CSS, even though it means a bit more work. For e.g. “e.g.” with spacing after the first period, you would need to decide whether it should be “e.g.” or “e. g.” at the character level. In the former case, just wrap the first period in a span and set padding-right on it. In the latter case, you could e.g. use e.<span class=thin>&nbsp;</span>g. and set the width of the span to something sufficiently small (using display: inline-block and a width setting).