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 ­ 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?

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 , ­jetzt arbeitet , / ist auf allen gängigen Browsern unterstützt.

Zusammenfassung vom Februar 2015 (teilweise aktualisiert im November 2017)

Sie alle funktionieren ziemlich gut, ­da Google immer noch Wörter indizieren kann, die sie enthalten.

• In Browsern: ­ und ­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 ­und ­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 ­und ­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 ­mit normal eingegebenen Wörtern. Ab 2017 scheint es nicht mehr mit Wörtern zu übereinstimmen, die enthalten ­. 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.

• ­- confumbabbl­ication­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 .

• ­- eonfulbabbl­ication­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): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Firefox (35.0.1, Mac): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Safari (6.1.2, Mac): ­Erfolg, noch <wbr> nicht getestet , ­Erfolg
• Edge (Windows 10): ­Erfolg, <wbr> Misserfolg (Unterbrechung, aber kein Bindestrich), ­Erfolg
• IE11 (Windows 10): ­Erfolg, <wbr> scheitert (keine Pause), ­Erfolg
• IE10 (Windows 10): ­Erfolg, <wbr> scheitert (keine Pause), ­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): ­Erfolg, <wbr>Erfolg, ­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): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Firefox (35.0.1, Mac): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Safari (6.1.2, Mac): ­ Fehler in MS Word (alle als Bindestriche einfügen), Erfolg in anderen Anwendungen <wbr> fehlschlagen , ­ Fehler in MS Word (alle als Bindestriche einfügen), Erfolg in anderen Anwendungen
• IE10 (Win7): ­ nicht alle Pasten als Bindestriche, <wbr> versagen , ­ scheitern Pasten alle als Bindestriche
• IE8 (Win7): ­ Fail- Pasten alle als Bindestriche, <wbr> Fail , ­ Fail- Pasten alle als Bindestriche
• IE7 (Win7): ­ nicht alle Pasten als Bindestriche, <wbr> versagen , ­ 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: ­schlägt fehl, ist ­erfolgreich
• Bing: ­schlägt fehl, ­schlägt fehl
• Baidu: ­schlägt fehl, ­schlägt fehl (kann Fragmente in längeren Zeichenfolgen abgleichen, aber nicht die Wörter für sich, die ein ­oder enthalten ­)
• Yandex: ­schlägt fehl, ist ­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): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Firefox (35.0.1, Mac): ­Erfolg, <wbr>Erfolg, ­Erfolg
• Safari (6.1.2, Mac): ­Erfolg, <wbr>Erfolg, ­Erfolg
• IE10 (Win7): Nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten
• IE8 (Win7): Nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten
• IE7 (Win7): Nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten, <wbr>Erfolg, nur ­ fehlgeschlagene Übereinstimmungen, wenn beide schüchterne Bindestriche enthalten

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 ­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!

Ich benutze ­, 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 ­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.

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

Weiche Bindestriche

­ist ein weicher Bindestrich, dh U + 00AD: SOFT HYPHEN. Beispielsweise,

innehålls­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.

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

​

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.)

⁠

Mit den beiden können Sie alles tun.

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); 

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 ­Leerzeichen, die durch Zeilenumbrüche entstehen, nicht gestoppt werden.

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ния'.

Manchmal scheinen Webbrowser verzeihender zu sein, wenn Sie die Unicode-Zeichenfolge ­anstelle der ­Entität verwenden.

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

<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>