Der Name Null-Breiten-Leerzeichen ist widersprüchlich, aber es ist nicht ohne Nutzen. Im Text könnte man es vielleicht um Schrägstriche herum verwenden, weil man sicherstellen möchte, dass die Wörter einzeln behandelt werden, aber keine physischen Leerzeichen um den Schrägstrich herum haben möchten.
Das ist jedoch eher theoretisch – ich habe das noch nie gebraucht. Es könnte in einem langen Wort nützlich sein, um anzudeuten, dass es dort umgebrochen werden kann… aber auch das ist selten, da wir den weichen Trennstrich (­) haben, der dafür vorgesehen ist und am Umbruch typischerweise einen passenden Bindestrich hinterlässt.
Was ich tun musste, war genau das Gegenteil: ein System austricksen, damit es ein einzelnes Wort als zwei Wörter betrachtet. Wie auf Twitter, wenn ich @benutzername oder #hashtag im Text eines Tweets verwende, werden diese entsprechend verlinkt. Aber das will ich nicht immer. Auf CSS Twitter möchte ich vielleicht auf eine @media-Abfrage verweisen oder einen #id-Selektor anzeigen. Fügt man ein Null-Breiten-Leerzeichen zwischen die Symbole und den Text, bin ich fertig.
Holen Sie sich ein Null-Breiten-Leerzeichen auf Ihre Zwischenablage
Hier ist ein Pen, den ich vor langer Zeit erstellt habe und der Ihnen dabei helfen wird
Es gibt auch einen schnellen Trick, um dies von der Browserkonsole aus zu tun
copy('u{200B}')via
Und für noch eine weitere Möglichkeit, die Ihnen gefallen könnte, ein Bookmarklet!
Bedenken beim Kopieren und Einfügen
Die Gefahr bei Null-Breiten-Leerzeichen ist, dass man sie nicht sehen kann. Wenn jemand zum Beispiel Ihre @media-Abfrage mit dem Null-Breiten-Leerzeichen-Trick aus einem Tweet kopiert, funktioniert sie in seinem Code-Editor nicht (da sie die Regel ungültig macht) und es kann äußerst verwirrend sein. Aus diesem Grund ist es wahrscheinlich gut, die Verwendung in allem zu vermeiden, was als Code-Beispiel kopiert werden könnte, aber wahrscheinlich in Ordnung, wenn man ausdrücklich etwas nicht automatisch verlinken möchte.
Interessant zu bemerken, dass Strg+F das Null-Breiten-Leerzeichen in allen gängigen Browsern ignoriert (zumindest auf Mac).
Einige Hacks zur Verwendung von Null-Breiten-Leerzeichen
Shortcode deaktivieren (um den Shortcode-Markup so wie er ist für Präsentationszwecke oder als Nutzungsbeispiel anzuzeigen) → Nachteil, das Ergebnis ist nicht Copy-Paste-freundlich.
Schriftligaturen deaktivieren. Z.B. um zu verhindern, dass die Buchstaben
fundiin der Roboto-Schrift zusammenlaufen.Wie unterscheidet sich das von
?Das ist ein Leerzeichen… mit… Breite
ist ein geschütztes Leerzeichen. Nun, das sieht aus wie ein Leerzeichen, erlaubt aber keinen Zeilenumbruch daran. Als Beispiel nehmen wir an, Sie müssen einer Richtlinie folgen, die Zeilenumbrüche zwischen Artikel und Substantiv verbietet, dann können Sie es verwenden. Tatsächlich habe ich in diesem Absatz zwischen jedem Artikel und Substantiv eines eingefügt.Andererseits sieht ein Null-Breiten-Leerzeichen nicht wie ein Leerzeichen aus, wird aber als eines betrachtet. Neben dem Beispiel aus dem Artikel verwende ich es oft zur Formatierung von Markdown: Sie können keine Formatierung auf half eines Wordes anwenden, da sie in Commonmark nahe bei Leerzeichen beginnen oder enden muss, aber Sie können dies mit einem Null-Breiten-Leerzeichen umgehen.
ist sichtbar, es ist das geschützte Leerzeichen. Normalerweise, wenn Sie 3 Leerzeichen hintereinander schreiben, zeigt der Browser nur eines an. Außer wenn Sie $nbsp; verwenden, dann werden alle drei gerendert.
nbsp steht für Non-Breakable space, was ein echtes Leerzeichen mit Breite ist, aber es verhindert, dass zwei Wörter getrennt werden (z.B. am Ende einer Zeile).
Das Null-Breiten-Leerzeichen sieht, wie gezeigt, wie ein unsichtbares Zeichen aus.
Das ist kein Null-Breiten-Leerzeichen, sondern ein echtes Leerzeichen. Die obigen Beispiele sind für Leerzeichen, die keinen Platz eines Zeichens einnehmen.
Das NBSP hat die Größe eines normalen Leerzeichens und verhindert, dass der Text auf beiden Seiten des NBSP umgebrochen wird.
Das ZWS oder ZWSP hat eine Breite von Null (völlig unsichtbar) und erlaubt einen Zeilenumbruch ähnlich wie ein normales Leerzeichen.
Dann gibt es noch ZWJ oder Zero Width Joiner Character, das ebenfalls Null Breite hat, aber einen Zeilenumbruch auf beiden Seiten verhindert. Theoretisch würden Sie NBSP gar nicht benötigen, da ZWJ + Leerzeichen + ZWJ dasselbe ist. Aus historischen Gründen haben wir jedoch mehr Codepoints als logisch erforderlich.
Genauer gesagt, das ist ein Leerzeichen mit Breite, an dem der Text auf beiden Seiten niemals umgebrochen wird. Nützlich, um typografische "Waisen" (einzelne Wörter in einer neuen Zeile am Ende einer Überschrift oder eines Absatzes) zu verhindern. Ärgerlicherweise ist es auch, warum WYSIWYG-Editoren aus irgendeinem Grund doppelte Leerzeichen erstellen.
rendert immer noch ein Leerzeichen (das als geschützt markiert ist).Das Null-Breiten-Leerzeichen hingegen ist technisch gesehen ein Leerzeichen, wird aber ohne Breite gerendert. Sie können es nicht sehen. Wenn Sie es zwischen zwei Zeichen setzen, sind sie "zusammengeklebt", als hätten Sie überhaupt kein Leerzeichen eingegeben.
ist ein geschütztes Leerzeichen – es fügt auf jeden Fall ein Leerzeichen hinzu. Wenn Sie zehn davon hintereinander hätten, würden Sie ein großes Leerzeichen erzeugen.Das Gegenteil ist der Fall, es gibt gar kein Leerzeichen. Zehn davon würden kein Leerzeichen erzeugen, ein 0px Lücke.
Shift + Option + Leertaste sollte ein ZWS erzeugen. Tim Apple, mach es möglich.
Ich benutze KCharSelect für so etwas. Es macht alle Zeichen durch Namen, Code(s) sehr gut durchsuchbar und es läuft genauso gut unter Windows wie unter Linux.
Es ist praktisch in Sprachen, die Zeichen miteinander verbinden, wie Arabisch oder Persisch, das ist ZWNJ, Zero-Width Non-Joiner.
Mit Leerzeichen: دانه ها
Mit Sem Leerzeichen: دانهها
نسیم und نسیم
Es gibt mehrere gute Anwendungen dafür. Sie können sehr nützlich sein, wenn Sie eine lange URL anzeigen müssen – ZWS ermöglichen es Ihnen, sie bei Bedarf an sinnvollen Stellen auf mehrere Zeilen umzubrechen.
Es ermöglicht auch einen praktischen Hack in HTML-E-Mails, der Ihnen mehr Kontrolle über Ihren Vorschautext (oder Preheader-Text) in der Inbox gibt – das ist der Text unter Ihrer Betreffzeile. Litmus hat einen guten Artikel dazu, obwohl die Code-Formatierung zu wünschen übrig lässt.
Toller Artikel. Ich hatte mich mit genau diesem Anwendungsfall befasst. Es wäre schön, wenn Twitter eine Möglichkeit böte, Links zu "entlinken", aber ich nehme an, das würde eine zusätzliche Komplexitätsebene für Twitter-APIs hinzufügen, die auf bestimmte Formate wie @handle und #buzzword angewiesen sind, um automatisch als Links interpretiert zu werden.
Ich habe früher Null-Breiten-Leerzeichen für diese Zwecke verwendet, aber festgestellt, dass das Null-Breiten-Leerzeichen oft genug auf eine neue Zeile umbrach und damit den Textfluss in meinem Tweet unterbrach.
Ich habe einige Alternativen evaluiert, einschließlich Null-Breiten-Nicht-Umbrech-Leerzeichen, aber festgestellt, dass das, was in allen Szenarien besser funktionierte, tatsächlich das "Zero-Width Joiner"-Zeichen war, das der Browser fast als eine Verschmelzung der beiden verbundenen Zeichen interpretiert, aber Twitter respektiert es und ignoriert es aus seinem Verlinkungsmechanismus.
Ich musste einmal ein Problem in einer App debuggen, an der ich als Entwickler gearbeitet habe.
Es war ein CMS-ähnliches System.
Die Schreiber hatten ein Problem mit einem mysteriösen Zeilenumbruch mitten im Wort.
Und sie bestanden darauf, dass es behoben werden musste.
Ich bin mir nicht sicher, ob es Glück oder Hartnäckigkeit war, aber ich/wir haben festgestellt, dass ein Null-Breiten-Leerzeichen in den Text gelangt war.
Der einzige Weg, wie ich es nachweisen konnte, war,
curlzu verwenden und das Ergebnis ancatmit einem obskuren Flag zu übergeben, das unsichtbare Zeichen anzeigt.Die einzige Schlussfolgerung, die wir ziehen konnten, war, dass die Schreiber Text aus Word kopierten.
Schöne Zeiten..
Es muss einer meiner obskursten Bugs aller Zeiten sein.
Wie bettet man dieses CodePen-Panel-Ding in Ihren Artikel ein?!
Bitte sagen Sie es mir. Ich möchte solche Beispiele von CodePen auch in meinen Artikeln zeigen. [ Auf Blogger. com]
Wenn Sie einen öffentlichen Pen auf CodePen betrachten, klicken Sie auf die Schaltfläche "Embed" in der Fußzeile und holen Sie sich den Embed-Code.
https://codepen.io/features/embeds
Ich benutze
&# 8288;(Leerzeichen hinzugefügt, damit Sie es sehen können) ständig, meistens für Fußnoten und Gedankenstriche. Fußnoten, die auf Mobilgeräten auf die nächste Zeile springen, ohne begleitenden Text, sind weniger lesbar und visuell unansehnlich. Die Verwendung eines Null-Breiten-Leerzeichens ist auch viel einfacher als die CSS-Alternative, Text in ein<span>zu packen und es aufwhite-space: nowrapzu setzen.