HTML equivalent to …that DOES break;

Question

If I want to force two visually displayed two spaces I can do this:

FOO BAR  FOO BAR

This would sidestep HTML's whitespace collapsing feature, but it also would result in line breaks like this:

FOO 
BAR  FOO 
BAR

Is there a replacement that would act like a regular space that does break? Here's pseudo code for what I'm asking:

FOO
BAR&bsp;&bsp;
FOO
BAR

ps: I know this can be done with CSS. Not not what I'm interested in here.

Answer 1

you can try with the "ZERO WIDTH SPACE" character (hex 200B)

aaaaaaaaaaaaaaaaaaaaaaaaa  ​  aaaaaaaaaaaaaaaaaaaaaaaaa

which I believe is meant exactly for your case.

also, there's an HTML solution:

aaaaaaaaaaaaaaaaaaaaaaaaa&nbsp;&nbsp;<wbr>&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaaaa

the <wbr> tag defines a "word break opportunity"

Answer 2

The rendered width of the SPACE (U+0020) character depends on font, typically 1/4 em (often adjusted).

That means that, on average, Unicode's FOUR-PER-EM SPACE (U+2005) should work becouse it is defined to be: 1/4 em.

Repeating: foo  bar  
renders a 'breakable' foo bar foo bar etc. (having 2 'spaces') (on my pc in FF).

Have a look at Korpela's unicode spaces overview.

 Code   Name of the character      Width of the character
U+0020  SPACE                      Depends on font, typically 1/4 em, often adjusted
U+00A0  NO-BREAK SPACE             As a space, but often not adjusted
U+1680  OGHAM SPACE MARK           Unspecified; usually not really a space but a dash
U+180E  MONGOLIAN VOWEL SEPARATOR  No width
U+2000  EN QUAD                    1 en (= 1/2 em)
U+2001  EM QUAD                    1 em (nominally, the height of the font)
U+2002  EN SPACE                   1 en (= 1/2 em)
U+2003  EM SPACE                   1 em
U+2004  THREE-PER-EM SPACE         1/3 em
U+2005  FOUR-PER-EM SPACE          1/4 em
U+2006  SIX-PER-EM SPACE           1/6 em
U+2007  FIGURE SPACE               "Tabular width", the width of digits
U+2008  PUNCTUATION SPACE          The width of a period "."
U+2009  THIN SPACE                 1/5 em (or sometimes 1/6 em)
U+200A  HAIR SPACE                 Narrower than THIN SPACE
U+200B  ZERO WIDTH SPACE           Nominally no width, but may expand
U+202F  NARROW NO-BREAK SPACE      Narrower than NO-BREAK SPACE (or SPACE)
U+205F  MEDIUM MATHEMATICAL SPACE  4/18 em
U+3000  IDEOGRAPHIC SPACE          The width of ideographic (CJK) characters.
U+FEFF  ZERO WIDTH NO-BREAK SPACE  No width (the character is invisible)

Note that EN SPACE (= 1/2 em) should thus result in the same visual end-result (of 2 spaces), using just one unicode-character (and saving 7 characters in html-source!!)

The difference between SPACE and QUAD is (from wikipedia):

The en quad and the en space are usually synonymous as they both start as a space with a width of 1 en. However, in electronic publishing a few contrast the two by holding that if the font is condensed or expanded to alter the width of the characters, the en quad remains 1 en in width, while the en space is altered in width to the same proportion as the printing characters.

Hope this helps!

EDIT:
I did some cross-browser testing on this, including the other answers that have appeared in the meanwhile.

As pointed out, my suggestion relies on the font-maker to logically/lazy conclude that the width of his SPACE character equals that of the FOUR-PER-EM SPACE (and half that of the EN QUAD).
And as a programmer, I don't like uncertainty.
BoltCock's answer (&nbsp;&nbsp;<wbr>) and Wesabi's answer (  ​) take away that uncertainty of the width.

Ironically, there is no 'best' (yet): My suggestion and Wesabi's ​ use characters that older browsers (IE6)/fonts don't support; they'll be rendered as a white square □.

BoltCock's <wbr> on the other hand works perfectly in IE6, but suffers from other problems: It doesn't work in IE8 (and some others) (source: 0, 1, 2).

Depending on your specific use-case: Chris Nielsen's comment actually might be the best cross-browser solution: replace one of the   entities with a normal space...

Edit2:
Closing thoughts: from a semantical point of view (the text-content itself) you are combating a white-space collapsing feature (you tagged this as HTML). The 'best' solution thus would be to leave your content as it is, and (as you pointed out yourself): use css to disable the white-space collapsing feature.

Answer 3

If you want a wider-than-normal space that doesn't prevent line breaks, you probably want either an en space (U+2002,  ) or an em space (U+2003,  ). Typically, an en space is twice as wide as a normal space, and an em space is four times as wide.

Answer 4

If you really have to work within the constraints of HTML, and not worry about space widths, you could add a <wbr> element after the sequence of  s like so:

FOO 
BAR&nbsp;&nbsp;<wbr>FOO 
BAR