Ich habe einen berechtigten Textknoten, in den ich einen Inline-Platzhalter einfügen möchte (Element, wenn Sie möchten), dessen einziger Inhalt ein " ‍ " ist, das keine Breite haben sollte (und der Chrom-Inspektor sagt auch so viel) . Ich habe bemerkt, dass, wenn ich diesen Knoten inline in den Textknoten einfüge, die ganze Zeile "wackelt", als würde sie das Layout neu berechnen, obwohl dies das nicht beeinflussen sollte.
Ich habe auch getestet, dass, wenn der Textknoten, in den ich ihn einfüge, linksbündig ist, diese leichte Bewegung nicht passiert. Ist dies nur inhärent in der Art und Weise, wie der Browser die Textplatzierung in einem ausgerichteten Textelement berechnet, oder könnte es einen Workaround dafür geben?
Wie ich vermutet habe, ist das Problem, eher kein Problem, aufgrund der Art, wie "rechtfertigen" funktioniert. Um zu bestätigen, dass "justify" text-align dies verursacht, überprüfen Sie die jsffidle: Ссылка
Beide Divs sind gleich - & gt; außer dass First div text-align: justify hat und das andere nicht.
Sie werden sehen, dass das erste div dieses Verhalten zeigt, aber nicht das zweite div.
Dies liegt daran, dass "justify" auf diese Weise funktioniert (aus Wiki ):
Im begründeten Text werden die Leerzeichen zwischen Wörtern und in geringerem Maße zwischen Zeichen oder Buchstaben (Kerning) gestreckt oder manchmal komprimiert, um den Text sowohl am linken als auch am rechten Rand auszurichten.
Wenn wir also &zwb; einführen, wird der Text reorganisiert. Dieses Verhalten ist nicht konsistent, da nicht alle Zeichen mit &zwb; geändert werden. Wenn also &zwb; den Text ändert, werden einige Buchstaben "gestreckt / komprimiert", was zu dem scheinbar merkwürdigen Verhalten führt.
Das Beste, was ich dabei finden kann, ist, dass die Unterstützung für das zwj nicht in allen Browsern vollständig ist. Ihr Code nimmt das eingefügte span-Tag und entfernt es mit diesem .text () -Aufruf, so dass es den zwj auspackt und Anzeigeprobleme verursacht, wo immer es zwischen Buchstaben landet.
Ich bin nicht sicher, was die Endanwendung sein soll, aber die Verwendung der Funktion jQuery .html () wäre wahrscheinlich besser (Sie müssen nur überprüfen und sicherstellen, dass Sie nicht innerhalb eines Tags schreiben ), weil die Funktion .text () die Tags löscht.
Referenz: Ссылка
Tags und Links javascript html