Weicher Bindestrich in HTML (<wbr> vs. & schüchtern;)

154

Wie lösen Sie das Problem mit weichen Bindestrichen auf Ihren Webseiten? In einem Text können lange Wörter enthalten sein, die Sie möglicherweise mit einem Bindestrich umbrechen möchten. Sie möchten jedoch nicht, dass der Bindestrich anzeigt, ob sich das gesamte Wort in derselben Zeile befindet.

Laut Kommentaren auf dieser Seite <wbr> handelt es sich um eine nicht standardmäßige "von Netscape erfundene Tag-Suppe". Es scheint, dass &shy; es auch Probleme mit der Standardkonformität gibt . Es scheint keine Möglichkeit zu geben, eine funktionierende Lösung für alle Browser zu finden .

Wie gehen Sie mit weichen Bindestrichen um und warum haben Sie sich dafür entschieden? Gibt es eine bevorzugte Lösung oder Best Practice?


Siehe verwandte SO-Diskussion hier .

Pontus
quelle
Es tut uns leid, dass Sie früher geschlossen haben - dies ist nah, aber nicht ganz das gleiche wie das andere. Ich werde den Link verlassen.
Chris Marasti-Georg
2
Bitte beachten Sie, dass dies <wbr>überhaupt kein Bindestrich sein soll.
Andreas Rejbrand
Zum Testen von Browsern: jsfiddle.net/k2hbrjz8/2 Entweder & # 173; oder & schüchtern; scheint wie gewünscht für die Anzeige und das Kopieren / Einfügen zu funktionieren. <wbr> wählt nur die Hälfte des Wortes aus, wenn Sie darauf doppelklicken. Die Suche findet alle im aktuellen Firefox (ab diesem Kommentardatum). Wenn & # 173; Indizes besser, verwenden Sie es.
Karmakaze

Antworten:

132

Leider ist &shydie Unterstützung zwischen den Browsern so inkonsistent, dass sie nicht wirklich verwendet werden kann.

QuirksMode ist richtig - es gibt derzeit keine gute Möglichkeit, weiche Bindestriche in HTML zu verwenden. Sehen Sie, was Sie tun können, um ohne sie auszukommen.

2013 edit: Nach Quirksmode , &shy;jetzt arbeitet , / ist auf allen gängigen Browsern unterstützt.

Marco
quelle
11
Leider nicht. Versuchen Sie, in Ihrem Browser nach einem Wort zu suchen, das einen weichen Bindestrich enthält. Die meisten Browser behandeln es als zwei separate Wörter, anstatt den weichen Bindestrich zu ignorieren.
gclj5
3
@ gclj5 Ich habe gerade die Suche nach einem &shy;Wort in Chrome v21 getestet und es ignoriert den weichen Bindestrich korrekt. Ich bin mir jedoch nicht sicher über IE, FF und andere Browser.
evanrmurphy
6
Es funktioniert in den letzten FF, Chrome und Safari einwandfrei (dh Wörter können durchsucht werden).
MMM
10
Aber kopiere Text mit & schüchtern; in Chrome Text mit Bindestrich zurückgeben. Beispiel: "Uni & schüchtern; später & schüchtern; al." kopiert als "uni-later-al".
Enyby
2
Heute mussten wir die &shy;Nutzung aufgrund bestimmter Fehler im Webkit (die die neuesten Versionen von Safari, Safari iOS und Chrome betreffen) einstellen, was dazu führte, dass seltsame Zeichen mit einer erheblichen Anzahl von benutzerdefinierten Schriftarten (sowohl kostenlos als auch kommerziell) gerendert wurden
Nico Pernice
58

Zusammenfassung vom Februar 2015 (teilweise aktualisiert im November 2017)

Sie alle funktionieren ziemlich gut, &#173;da Google immer noch Wörter indizieren kann, die sie enthalten.

  • In Browsern: &shy; und &#173;beide werden wie erwartet in großen Browsern angezeigt (sogar im alten IE!). <wbr>wird in neueren Versionen von IE (10 oder 11) nicht unterstützt und funktioniert in Edge nicht ordnungsgemäß.
  • Beim Kopieren und Einfügen aus Browsern: (getestet 2015) wie erwartet für &shy;und &#173;für Chrome und Firefox unter Mac unter Windows (10) werden die Zeichen beibehalten und harte Bindestriche in Notepad und unsichtbare weiche Bindestriche in Anwendungen eingefügt, die sie unterstützen. IE (win7) fügt auch in IE10 immer Bindestriche ein, und Safari (Mac) kopiert auf eine Weise, die in einigen Anwendungen (z. B. MS Word) als Bindestriche eingefügt wird, in anderen jedoch nicht
  • Die Suche auf Seite funktioniert für &shy;und &#173;in allen Browsern mit Ausnahme des IE, der nur exakten kopierten und eingefügten Übereinstimmungen entspricht (sogar bis zu IE11).
  • Suchmaschinen: Google vergleicht Wörter &#173;mit normal eingegebenen Wörtern. Ab 2017 scheint es nicht mehr mit Wörtern zu übereinstimmen, die enthalten &shy;. Yandex scheint dasselbe zu sein. Bing und Baidu scheinen auch nicht zusammen zu passen.

Probier es aus

Für aktuelle Live-Tests finden Sie hier einige Beispiele für eindeutige Wörter mit weichen Bindestrichen.

  • &shy;- confumbabbl&shy;ication&shy;ism- Confumbabblicationism
    • .................................................. .................................................. .......... Confumbabblicationism
    • .................................................. .................................................. .............. Confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Diese Site wird <wbr/>aus der Ausgabe entfernt. Hier ist ein jsbin.com-Snippet zum Testen .

  • &#173;- eonfulbabbl&#173;ication&#173;ism- eonfulbabblicationism
    • .................................................. .................................................. ............. eonfulbabblicationism
    • .................................................. .................................................. ................ eonfulbabblicationism

Hier gibt es keine schüchternen Bindestriche (dies dient zum Kopieren und Einfügen in Find-on-Page-Tests; so geschrieben, dass die Suchmaschinentests nicht unterbrochen werden):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Browserübergreifend anzeigen

Erfolg: Anzeige als normales Wort, außer dort, wo es brechen soll, wenn es an der angegebenen Stelle bricht und getrennt wird.

Fehler: Wird ungewöhnlich angezeigt oder kann nicht an der vorgesehenen Stelle unterbrochen werden.

  • Chrome (40.0.2214.115, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Firefox (35.0.1, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Safari (6.1.2, Mac): &shy;Erfolg, noch <wbr> nicht getestet , &#173;Erfolg
  • Edge (Windows 10): &shy;Erfolg, <wbr> Misserfolg (Unterbrechung, aber kein Bindestrich), &#173;Erfolg
  • IE11 (Windows 10): &shy;Erfolg, <wbr> scheitert (keine Pause), &#173;Erfolg
  • IE10 (Windows 10): &shy;Erfolg, <wbr> scheitert (keine Pause), &#173;Erfolg
  • IE8 (Windows 7): unberechenbar - manchmal funktioniert keiner von ihnen überhaupt und alle folgen einfach CSS word-wrap. Manchmal scheinen sie alle zu funktionieren. Noch kein klares Muster gefunden, warum.
  • IE7 (Windows 7): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg

Über Browser kopieren und einfügen

Erfolg: Kopieren und Einfügen des gesamten Wortes, ohne Trennzeichen. (getestet auf dem Mac beim Einfügen in die Browsersuche, MS Word 2011 und Sublime Text)

Fehler: Einfügen mit einem Bindestrich, einem Leerzeichen, einem Zeilenumbruch oder mit Junk-Zeichen.

  • Chrome (40.0.2214.115, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Firefox (35.0.1, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Safari (6.1.2, Mac): &shy; Fehler in MS Word (alle als Bindestriche einfügen), Erfolg in anderen Anwendungen <wbr> fehlschlagen , &#173; Fehler in MS Word (alle als Bindestriche einfügen), Erfolg in anderen Anwendungen
  • IE10 (Win7): &shy; nicht alle Pasten als Bindestriche, <wbr> versagen , &#173; scheitern Pasten alle als Bindestriche
  • IE8 (Win7): &shy; Fail- Pasten alle als Bindestriche, <wbr> Fail , &#173; Fail- Pasten alle als Bindestriche
  • IE7 (Win7): &shy; nicht alle Pasten als Bindestriche, <wbr> versagen , &#173; scheitern Pasten alle als Bindestriche

Suchmaschinen-Matching

Aktualisiert im November 2017. <wbr>Nicht getestet, da das CMS von StackOverflow es entfernt hat.

Erfolg: Suchen im gesamten, nicht getrennten Wort finden diese Seite.

Fehler: Suchmaschinen finden diese Seite nur bei der Suche nach den gebrochenen Segmenten der Wörter oder einem Wort mit Bindestrichen.

  • Google: &shy;schlägt fehl, ist &#173;erfolgreich
  • Bing: &shy;schlägt fehl, &#173;schlägt fehl
  • Baidu: &shy;schlägt fehl, &#173;schlägt fehl (kann Fragmente in längeren Zeichenfolgen abgleichen, aber nicht die Wörter für sich, die ein &#173;oder enthalten &shy;)
  • Yandex: &shy;schlägt fehl, ist &#173;erfolgreich (obwohl es möglich ist, dass es mit einem String-Fragment wie Baidu übereinstimmt, nicht 100% sicher)

Suchen Sie auf einer Seite in verschiedenen Browsern

Erfolg und Misserfolg als Suchmaschinen-Matching.

  • Chrome (40.0.2214.115, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Firefox (35.0.1, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • Safari (6.1.2, Mac): &shy;Erfolg, <wbr>Erfolg, &#173;Erfolg
  • IE10 (Win7): Nur &shy; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur &#173; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten
  • IE8 (Win7): Nur &shy; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur &#173; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten
  • IE7 (Win7): Nur &shy; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur &#173; fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten
user56reinstatemonica8
quelle
Heute <wbr/>funktioniert in Firefox und Chrome. (Und um ehrlich zu sein, ich vermute, dass es sogar im Februar war, zumindest unter Windows.)
Andreas Rejbrand
1
Ich verwende die neuesten Versionen von Chrome und Firefox unter Windows 7 und <wbr/>funktioniert in beiden. Bitte beachten Sie, dass das <wbr>Element bei einer Unterbrechung keinen Bindestrich hinzufügen soll . Mit anderen Worten, <wbr/>und &shy; sollen nicht das Gleiche tun .
Andreas Rejbrand
Ah, <wbr/>wenn man es betrachtet, sieht es so aus, als hätte das CMS von SE das s aus dem endgültigen Markup entfernt, während es im Quellcode bleibt. Verdammt du SE! Wird bearbeiten ..
user56reinstatemonica8
Seltsam, kann diesen 'Bug' nicht reproduzieren.
Andreas Rejbrand
Gibt es irgendeinen Grund zum Testen &shy;und &#173;? Sobald sie das DOM erreichen, sind sie buchstäblich gleich ; Nur im HTML-Tokenizer unterscheiden sie sich überhaupt.
Gsnedders
32

Es wird ständig versucht, die Silbentrennung in CSS3 zu standardisieren .

Einige moderne Browser, insbesondere Safari und Firefox, unterstützen dies bereits. Hier finden Sie eine gute und aktuelle Referenz zur Browserunterstützung .

Sobald die CSS-Silbentrennung universell implementiert ist, ist dies die beste Lösung. In der Zwischenzeit kann ich Hyphenator empfehlen - ein JS-Skript, das herausfindet, wie Sie Ihren Text auf die für einen bestimmten Browser am besten geeignete Weise trennen können.

Silbentrenner:

  • basiert auf dem von LaTeX und OpenOffice allgemein bekannten Silbentrennungsalgorithmus von Franklin M. Liangs .
  • verwendet die CSS3-Silbentrennung, sofern verfügbar.
  • fügt automatisch &shy;in die meisten anderen Browser ein,
  • unterstützt mehrere Sprachen,
  • ist hoch konfigurierbar,
  • fällt ordnungsgemäß zurück, falls Javascript nicht aktiviert ist.

Ich habe es benutzt und es funktioniert großartig!

Dominik
quelle
Firefox unterstützt die Eigenschaft, tut aber nichts, wenn es angewendet wird
bob0the0mighty
Ich habe mich geirrt, Firefox funktioniert, aber Sie müssen einen Lang-Typ in Ihr HTML-Tag aufnehmen.
Bob0the0mighty
Das Hyphenator-Skript scheint nicht mehr gepflegt zu sein, aber es gibt eine neue Version desselben Autors hier: github.com/mnater/Hyphenopoly
MattFisch
20

Ich benutze &shy;, bei Bedarf manuell eingefügt.

Ich finde es immer schade, dass Leute keine Techniken verwenden, weil es einen - vielleicht alten oder seltsamen - Browser gibt, der sie nicht so behandelt, wie sie angegeben wurden. Ich habe festgestellt, dass dies &shy;sowohl in den neuesten Internet Explorer- als auch in den Firefox-Browsern ordnungsgemäß funktioniert. Das sollte ausreichen. Sie können eine Browserüberprüfung einschließen, die Personen auffordert, etwas ausgereiftes zu verwenden oder auf eigenes Risiko fortzufahren, wenn sie mit einem seltsamen Browser herumkommen.

Die Silbenbildung ist nicht so einfach und ich kann nicht empfehlen, sie Javascript zu überlassen . Es ist ein sprachspezifisches Thema und muss möglicherweise vom Deskman sorgfältig überarbeitet werden, wenn Sie nicht möchten, dass Ihr Text dadurch irritiert wird. Einige Sprachen wie Deutsch bilden zusammengesetzte Wörter und führen wahrscheinlich zu Zersetzungsproblemen. ZB Spargelder( keimsparendes Geld, pl.) Kann nach Silbenregeln an zwei Stellen eingewickelt werden ( Spar-gel-der). Wenn Sie es jedoch in die zweite Position einwickeln, wird der erste Teil als Spargel-( Keim- Spargel) angezeigt, wodurch ein völlig irreführendes Konzept im Kopf des Lesers aktiviert wird und daher vermieden werden sollte.

Und was ist mit der Saite Wachstube? Es könnte entweder "Wachraum" ( Wach-stu-be) oder "Wachsröhre" ( Wachs-tu-be) bedeuten . Möglicherweise finden Sie auch andere Beispiele in anderen Sprachen. Sie sollten darauf abzielen, eine Umgebung bereitzustellen, in der der Deskman bei der Erstellung eines gut silbigen Textes unterstützt werden kann, wobei jedes kritische Wort Korrektur gelesen wird.

Matthias Ronge
quelle
6
Das übliche englische Beispiel für Spar-Gelder vs. Spargel-der ist "Re-Cord" vs. "Recorder" (Homographen, aber keine Homophone). Ersteres ist ein Verb, letzteres ist ein Substantiv. Algorithmen sind dafür normalerweise nicht intelligent genug, selbst in Englisch (eine der am besten unterstützten Sprachen in der IT).
Nicholas Shanks
38
Ich würde Experten-Austausch gegen Experten-Sex-Austausch vorschlagen
CJ Dennis
13

Es ist sehr wichtig zu bemerken , dass, wie von HTML5, <wbr>und &shy; soll nicht die gleiche Sache tun !

Weiche Bindestriche

&shy;ist ein weicher Bindestrich, dh U + 00AD: SOFT HYPHEN. Beispielsweise,

innehålls&shy;förteckning

könnte gerendert werden als

innehållsförteckning

oder als

innehålls-
förteckning

Ab heute funktionieren weiche Bindestriche in Firefox, Chrome und Internet Explorer.

Das wbrElement

Das wbrElement ist eine Wortumbruchmöglichkeit, bei der bei einem Zeilenumbruch kein Bindestrich angezeigt wird. Beispielsweise,

ABCDEFG<wbr/>abcdefg

könnte gerendert werden als

ABCDEFGabcdefg

oder als

ABCDEFG
abcdefg

Ab heute funktioniert dieses Element in Firefox und Chrome.

Andreas Rejbrand
quelle
4

Die Raumentität mit der Breite Null kann anstelle von <wbr>Tags auf praktisch jeder Plattform zuverlässig verwendet werden.

&#8203;

Ebenfalls nützlich ist das Wort Joiner- Entität, mit dem eine Unterbrechung verhindert werden kann. (Fügen Sie zwischen die einzelnen Zeichen eines Wortes ein, außer dort, wo Sie die Unterbrechung wünschen.)

&#8288;

Mit den beiden können Sie alles tun.

AVL Geek
quelle
1
Ein Raum mit einer Breite von Null (ZWSP, U + 200B &#8203;) ist genau das, was <wbr>(iirc; es ist schon eine Weile her) getan hat, aber besser unterstützt wird (universell, heutzutage). Es ist genau das, was ich suchte, da es sich nicht einen Bindestrich gebrochen Worte hinzufügen, so dass zB durch Komma getrennte Werte wickeln , wenn sie durch einen Lauf s/,/,\&#8203;/gErsatz.
Adam Katz
2

Dies ist eine Crossbrowser-Lösung, die ich mir vor einiger Zeit angesehen habe und die auf dem Client ausgeführt wird und jQuery verwendet:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 
anthonyv
quelle
2

Ich schlage vor, zu verwenden wbr, damit der Code wie folgt geschrieben werden kann:

<p>这里有一段很长,很长的<wbr
></wbr>文字;这里有一段</p>

Es führt kein Leerzeichen zwischen Zeichen, während &shy;Leerzeichen, die durch Zeilenumbrüche entstehen, nicht gestoppt werden.

Weijing Jay Lin
quelle
2

Ich habe in einigen Desktop- und mobilen Browsern erfolgreich Unicode-Zeichen mit weichen Bindestrichen verwendet , um das Problem zu lösen.

Das Unicode-Symbol ist \u00ADund ist ziemlich einfach in Python-Unicode-Zeichenfolgen wie einzufügen s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Eine andere Lösung besteht darin, das Unicode-Zeichen selbst einzufügen, und die Quellzeichenfolge sieht in Editoren wie Sublime Text, Kate, Geany usw. ganz normal aus (der Cursor fühlt sich jedoch als unsichtbares Symbol an).

Hex-Editoren von internen Tools können diese Aufgabe einfach automatisieren.

Ein einfacher Kludge besteht darin, seltene und sichtbare Zeichen wie zu verwenden ¦, die einfach zu kopieren und einzufügen sind, und sie durch einen weichen Bindestrich zu ersetzen, indem Sie z $(document).ready(...). B. ein Frontend-Skript verwenden . Quellcode wie s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')ist leichter zu lesen als s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

dmitry_romanov
quelle
0

Manchmal scheinen Webbrowser verzeihender zu sein, wenn Sie die Unicode-Zeichenfolge &#173;anstelle der &shy;Entität verwenden.

Tommy Kronkvist
quelle
0

Wenn Sie Pech haben und dennoch JSF 1 verwenden müssen, besteht die einzige Lösung darin, & # 173;, & schüchtern; funktioniert nicht.

Jaap D.
quelle
0

<wbr> und & schüchtern;

Heute können Sie beide verwenden.

<wbr> wird verwendet, um zu brechen und keine weiteren Informationen einzugeben .

Beispiel, um Links anzuzeigen:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&schüchtern; Bei Bedarf wird der Text an dieser Stelle unterbrochen und ein Bindestrich hinzugefügt.

Beispiel:

"Ich bin & schüchtern; pos & schüchtern; sí & schüchtern; vel pa & schüchtern; ra um ho & schüchtern; mem a & schüchtern; pren & schüchtern; der a & schüchtern; qui & schüchtern; lo que ele acha que já sa & schüchtern; sein."

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}
<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>

Roberto Góes
quelle