Span vs &zwnj

[Rolf B]

Hallo alle,

unser Wiki hat teils recht tiefe Hierarchien für die Artikel, was zu Überschriften wie

JavaScript/DOM/‌Node/‌firstChild

oder

JavaScript/‌Tutorials/‌OOP/‌Objekte und ihre Eigenschaften

führt und, vor allem bei kleinen Viewports, dazu führt, dass die Überschrift aus den Viewport hinausragt.

Um das zu lösen, hatte ich im Makeover-Skin zwei Ansätze verfolgt:

1. <span>JavaScript/</span><span>DOM/</span><span>Node/</span><span>firstChild</span>, mit einem display:inline-block auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/&zwnj;DOM/‌&zwnj;Node/‌&zwnj;firstChild
3. JavaScript/<wbr>DOM/‌<wbr>Node/‌<wbr>firstChild

Begonnen hatte ich mit (1), aber wie man hier sehen kann (Edit: dieser Link erzwingt den Makeover-Skin, nur für diese Seite), ist das unbefriedigend. Ohne Margin ist ist / und T zu dicht aneinander, mit einem margin-right am Span ist es an den anderen Stellen zu viel. Ob ich /</span><span> oder </span>/<span> nehme, ist dabei egal. Mit </span><span>/ passt zwar das /T, aber dafür t/ nicht mehr.

Deswegen hatte ich Variante mit dem Zero-Width Non-Joiner genommen. Visuell ist er komplett unauffällig und der Browser bricht an dieser Stelle um, wenn nicht genug Platz ist. Prima.

Aber jetzt kam Mattias und sagt: Der ZWNJ wird bei Copy+Paste mitkopiert und fällt dabei zunächst überhaupt nicht auf. Aber der Link, den man auf diese Weise generiert, ist kaputt. Das schlimme ist: Ein Zero-Width Space bemerke ich, wenn ich mit zeichenweise über einen String laufe, der Cursor bleibt dann kurz stehen. Beim ZWNJ ist das nicht der Fall.

Ich habe noch versucht, die ZWNJ durch ein <wbr> Element zu ersetzen, das hatte aber den gleichen Effekt wie die span-Lösung ohne Margins.

Ich bräuchte also eine Lösung, die beides vereint: Transparenz gegenüber Copy+Paste, visuell korrekte Zeichenabstände und Zeichenumbruch an vorgegebenen Stellen. Gibt's das?

Rolf