Multiple Spaces Between Words in HTML without  

HtmlCssFonts

Html Problem Overview


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.

Thanks in advance.

Html Solutions


Solution 1 - Html

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/

Solution 2 - Html

Use <pre> when whitespace is significant.

Solution 3 - Html

you can replace all spaces with &#160

Solution 4 - Html

Using   for spaces is a complete misuse of it.

You can use span tag -

<span style="margin-left: 10px; margin-right: 10px">*AA-XXXX    *"</span>

Solution 5 - Html

I like to use this special white-space that HTML and JavaScript does not detect as white-space. ->" "

It looks better on the code end too.

UPDATE

Looks like stack over flow replaces it with a regular space so here is the ASCII code for it

Dec 160 Hex A0 Oct 240

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTed SchecklerView Question on Stackoverflow
Solution 1 - HtmlGabriele PetrioliView Answer on Stackoverflow
Solution 2 - HtmlQuentinView Answer on Stackoverflow
Solution 3 - HtmlMahmoud FarahatView Answer on Stackoverflow
Solution 4 - HtmlNinad KulkarniView Answer on Stackoverflow
Solution 5 - HtmlParley HammonView Answer on Stackoverflow