Search code examples
htmlcssfonts

Multiple Spaces Between Words in HTML without  

I'm using a barcode font "Free 3 of 9 Extended Regular" and the print out needs to have multiple spaces in some cases, to match the number of characters in the field. Example:

*AA-XXXX    *"

(four spaces follow the item number to make the 12 characters. The barcode reader will give me an error if there are less characters.

nbsp; will force multiple spaces, however, IE and Firefox both display those as standard font spaces and do not use the barcode font. The barcode displays as broken up between the non-space characters. (Incidentally, only IE 6 does display nbsp; in the proper font.) If I use a regular space, it trims the number of spaces down and displays only one.

Solution

  • Look at the white-space css property

    Using 

    .barcode{
    white-space:pre; /* or pre-wrap if you want wrapping to still work. */
}

    and

    <span class="barcode">*AA-XXXX    *"</span>

    will do the trick.

    .barcode{
    font-family:Courier;
    white-space:pre; /* or pre-wrap if you want wrapping to still work.*/
}
    <span class="barcode">*AA-XXXX    *"</span>

    external demo: http://www.jsfiddle.net/gaby/Z3gkq/