Non-collapsing but still (line-)breakable space in HTML?

Question

What can I use in HTML if I want to have whitespace in the middle of the line that looks like three spaces, but can still be broken if the line gets too long?

Regular whitespace gets collapsed (a run of spaces looks the same as a single space), and at the non-breaking space (&nbsp) the line cannot be broken.

Update: I think what I really want is a ＜pre＞ tag that can still break long lines (I need to display source code).

Answer 1

What about one or more em spaces ( )? Granted, this would depend on what the user's font size is. If that doesn't really work in your design, consider an en space ( ).

You might also want to look at this table of various spaces on Wikipedia.

Answer 2

I actually have the exact answer you’re looking for. I searched everywhere for this answer and nothing anyone suggested worked perfectly. So, I thought up a solution and tried it and was floored that it worked without any flaw!

Garrow was actually right (he just didn’t explain it or take it all the way). The solution is instead of putting   alone, put &nbsp;<wbr>. Just do a simple search and replace and add the <wbr> tag after every  . Works perfectly!

The <wbr> tag is a little-known tag supported in all major browsers that tells the browser to put a newline here ONLY if it is needed.

Update: I found one browser that this doesn’t work exactly right in – IE 8! They actually took out the <wbr> tag! I solved this issue by creating a class that says:

.wbr:before { content: "\200B" }

and instead of replacing   with &nbsp;<wbr>, replace it with the following:

&nbsp;<wbr><span class='wbr'></span>

In PHP, this would look like:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

Don’t forget to add the class as well.

Obviously this is getting quite a bit excessive, replacing a single space with all of that, but it does work just as desired and since I never saw the markup it worked for me.

If this is too messy, another solution is to exchange double spaces for a   followed by a normal space. This will alternate   and normal spaces and works in my tests.

In PHP, this would look like:

$text = str_replace("  ","  ", $text);

Hope this helps! I put enough research into this; I thought I should pass it on.

Answer 3

Won't a space between two non-breaking spaces work?

   

Answer 4

How about <wbr>?

Answer 5

If you're not targeting IE (except 8, standards mode):

<span style="white-space: pre-wrap">   </span>

For IE, <span style="width:3ex"></span> works in quirks mode, so merge them and...

<span style="width:3ex;white-space:pre-wrap">   </span>

which seems to work everywhere I tried... except IE7 standards. D'oh!

Answer 6

How about two  's followed by a regular space? The only disadvantage to that (as far as I know) is that if a line break does naturally fall at the regular space, you'll have a bit of trailing space on the preceding line due to the non-breaking spaces, but I don't think that would ever make a difference in the actual appearance of the page.

Answer 7

It might be better to take a step back and ask what it is you're trying to render. What does this extra-wide space signify?

Answer 8

it give's 100px to the left space between your text spaces example

span style="margin-left:100px;"

(n_n)