HTML equivalent to ...that DOES break;

Question

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

FOO BAR&nbsp;&nbsp;FOO BAR

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

FOO 
BAR&nbsp;&nbsp;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.

Could you replace one of the ` ` entities with a normal space? — Chris Nielsen, Jun 28 '14 at 16:38
Since NO-BREAK SPACE is like SPACE except for line-breaking behavior, the obvious answer is SPACE. But this sounds too trivial, and why would you mention ` ` at all if you do *not* want to prevent line breaks? — Jukka K. Korpela, Jun 28 '14 at 18:41
@JukkaK.Korpela: it seems to me, the OP uses ` ` to combat html's whitespace collapsing feature. In other words: he looks for a space that html doesn't collapse by default. — GitaarLAB, Jun 28 '14 at 18:51
@GitaarLAB, possibly, but then he should say that in the question, in fact rewrite the entire question (and include an example that really illustrates what he wants). Besides, if you want to prevent white space collapse, you have almost always misanalyzed your original problem (and should use CSS, or maybe an HTML table, instead, depending on context). — Jukka K. Korpela, Jun 28 '14 at 18:55
After rereading the answers, it looks like @Wyzard's answer is exactly what I was looking for: ` ` and ` ` do not appear to collapse, and also allow for line breaking. — emersonthis, Jun 29 '14 at 19:25

GitaarLAB · Answer 1 · 2014-06-30T01:25:07.567

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 (  <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.

score 6 · Accepted Answer · answered Jun 28 '14 at 17:20

6

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

answered Jun 28 '14 at 17:20

Wyzard

33,849
3
67
87

6

There is nothing in the question that suggests that wider-than-normal space is wanted. – Jukka K. Korpela Jun 28 '14 at 18:43
3

The question is asking for something that's like a pair of spaces. A single twice-as-wide space sounds appropriate to me. – Wyzard Jun 28 '14 at 19:36

BoltClock · Answer 3 · 2014-06-28T17:22:56.963

5

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

edited Jun 28 '14 at 17:22

answered Jun 28 '14 at 17:15

BoltClock

700,868
160
1,392
1,356

score 4 · Answer 4 · 2014-06-28T19:32:06.340

4

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

aaaaaaaaaaaaaaaaaaaaaaaaa&nbsp;&nbsp;&#x200b;&nbsp;&nbsp;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"

edited Jun 28 '14 at 19:32

answered Jun 28 '14 at 17:22

HTML equivalent to ...that DOES break;

4 Answers4

Linked