Nicht-Kollaps, aber immer noch (Linie-) Raum in HTML?

Question

Was kann ich in HTML verwenden, wenn ich Weißespace in der Mitte der Linie haben möchte, die wie drei Räume aussieht, aber trotzdem gebrochen werden kann, wenn die Linie zu lang wird?

Regelmäßige Whitespace wird zusammengebrochen (ein Run von Leerzeichen sieht genauso aus wie ein einzelner Raum), und am nicht bahnbrechenden Raum () kann die Linie nicht gebrochen werden.

Aktualisieren: Ich denke, was ich wirklich will, ist ein ＜ Pre ＞ -Tag, das noch lange Zeilen brechen kann (ich muss Quellcode anzeigen).

Answer 1

Was ist mit einem oder mehreren EM -Räumen ()? Zugegeben, dies würde davon abhängen, wie die Schriftgröße des Benutzers ist. Wenn das in Ihrem Design nicht wirklich funktioniert, sollten Sie einen EN -Raum () in Betracht ziehen.

Vielleicht möchten Sie sich auch ansehen Diese Tabelle verschiedener Räume auf 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)