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 ( ) 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).
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.
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!
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.
Won't a space between two non-breaking spaces work?
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?
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 "& nbsp;" alone, put "& nbsp;< wbr>". (remove the spaces of course). Just do a simple search and replace and add the < wbr> tag after every & nbsp;. 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 "& nbsp;" 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 nbsp followed by a normal space. This will alternate nbsp and normal spaces and works in my tests.
In php, this would look like:
$text = str_replace(" ","& nbsp; ", $text);
Hope this helps! I put enough research into this, I thought I should pass it on.