Styling the width of non-breaking spaces

Question

I'd like to make my non-breaking spaces narrower for use with French punctuation, preferably without resorting to lowering font-size.

Here's what I tried:

Text<span class"sp-thin-fr">&nbsp;</span>?

span.sp-thin-fr {
    display: inline-block;
    width:   0.125em;  /* 1/8 em */
    }

The problem is that display: inline-block for some reason overrides the non-breaking property of nbsp (tested in Firefox, Chrome and IE 11).

Can anyone think of another way of doing this, without putting the characters around the space in spans with white-space: nowrap applied? (Note that I'd like to be able to set the exact width for the space.)

Answer 1

No need to use display:inline-block.

letter-spacing would probably work here. So:

span.sp-thin-fr { letter-spacing: 0px; }

Example here: http://jsfiddle.net/rkbkbq8q/