Laying the width of non-breaking spaces
I would like to make my non-breaking spaces narrower for use with French punctuation, preferably without resorting to omission font-size
.
Here's what I've tried:
Text<span class"sp-thin-fr"> </span>?
span.sp-thin-fr {
display: inline-block;
width: 0.125em; /* 1/8 em */
}
The problem is display: inline-block
overriding the nbsp non-breaking property for some reason (tested in Firefox, Chrome and IE 11).
Can anyone think of another way to do this, without putting characters around the space with white-space: nowrap
? (Note that I would like to be able to set the exact width for the space.)
source to share
Don't need to use display:inline-block
.
letter-spacing
will probably work here. So:
span.sp-thin-fr { letter-spacing: 0px; }
An example is here: http://jsfiddle.net/rkbkbq8q/
source to share