Come risolvi il problema con trattini morbidi sulle tue pagine web? In un testo possono esserci parole lunghe che potresti voler interrompere con un trattino. Ma non vuoi che il trattino mostri se l'intera parola è sulla stessa riga.

Secondo i commenti di questa pagina <wbr> è un "tag soup" non standard inventato da Netscape. Sembra che ­ abbia anche problemi con la conformità standard . Sembra che non ci sia modo di ottenere una soluzione funzionante per tutti i browser .

Qual è il tuo modo di gestire i trattini morbidi e perché l'hai scelto? Esiste una soluzione preferita o una migliore pratica?

Sfortunatamente, &shyil supporto è così incoerente tra i browser che non può essere realmente utilizzato.

QuirksMode ha ragione: non c'è un buon modo per usare trattini morbidi in HTML in questo momento. Guarda cosa puoi fare per andare senza di loro.

Modifica del 2013: secondo QuirksMode , ­ora funziona / è supportato su tutti i principali browser.

Riepilogo febbraio 2015 (parzialmente aggiornato novembre 2017)

Si comportano tutti abbastanza bene, il vantaggio ­è che Google può ancora indicizzare le parole che lo contengono.

• Nei browser: ­ ed ­entrambi vengono visualizzati come previsto nei principali browser (anche vecchio IE!). <wbr>non è supportato nelle versioni recenti di IE (10 o 11) e non funziona correttamente in Edge.
• Se copiato e incollato dai browser: (testato 2015) come previsto per ­e ­per Chrome e Firefox su Mac, su Windows (10), mantiene i caratteri e incolla i trattini rigidi nel Blocco note e i trattini morbidi invisibili nelle applicazioni che li supportano. IE (win7) incolla sempre con trattini, anche in IE10, e Safari (Mac) copia in un modo che incolla come trattini in alcune applicazioni (ad esempio MS Word), ma non in altre
• Trova nella pagina funziona per ­e ­su tutti i browser tranne IE che corrisponde solo alle corrispondenze esatte copiate e incollate (anche fino a IE11)
• Motori di ricerca: Google abbina parole contenenti ­parole digitate normalmente. A partire dal 2017 sembra non corrispondere più alle parole che contengono ­. Yandex sembra essere lo stesso. Bing e Baidu sembrano non corrispondere neanche.

Provalo

Per test live aggiornati, ecco alcuni esempi di parole uniche con trattini morbidi.

• ­- confumbabbl­ication­ism- confumbabblicationism
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Questo sito rimuove <wbr/>dall'output. Ecco uno snippet di jsbin.com per i test .

• ­- eonfulbabbl­ication­ism- eonfulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ eonfulbabblicationism

Eccoli senza trattini timidi (questo è per copiare e incollare in test di ricerca; scritti in un modo che non interromperà i test dei motori di ricerca):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Visualizza attraverso i browser

Operazione riuscita: visualizzazione come una parola normale, tranne dove deve essere interrotta, quando si interrompe e viene sillabata nella posizione specificata.

Errore: visualizzazione insolita o mancata interruzione nella posizione prevista.

• Chrome (40.0.2214.115, Mac): ­successo, <wbr>successo, ­successo
• Firefox (35.0.1, Mac): ­successo, <wbr>successo, ­successo
• Safari (6.1.2, Mac): ­successo, <wbr> non ancora testato , ­successo
• Edge (Windows 10): ­esito positivo, <wbr> esito negativo (interruzione ma nessun trattino), ­esito positivo
• IE11 (Windows 10): ­esito positivo, <wbr> esito negativo (nessuna interruzione), ­esito positivo
• IE10 (Windows 10): ­esito positivo, <wbr> esito negativo (nessuna interruzione), ­esito positivo
• IE8 (Windows 7): erratico - a volte, nessuno di loro funziona affatto e tutti seguono semplicemente css word-wrap. A volte sembrano funzionare tutti. Non ho ancora trovato uno schema chiaro sul perché.
• IE7 (Windows 7): ­successo, <wbr>successo, ­successo

Copia e incolla tra i browser

Successo: copia e incolla dell'intera parola, non trattata. (testato su Mac incollando nella ricerca del browser, MS Word 2011 e Sublime Text)

Fallimento: incollare con un trattino, spazio, interruzione di riga o con caratteri spazzatura.

• Chrome (40.0.2214.115, Mac): ­successo, <wbr>successo, ­successo
• Firefox (35.0.1, Mac): ­successo, <wbr>successo, ­successo
• Safari (6.1.2, Mac): ­ fallire in MS Word (incolla tutti come trattini), successo in altre applicazioni <wbr> fallisce , ­ fallire in MS Word (incolla tutti come trattini), successo in altre applicazioni
• IE10 (Win7): ­ fallisce tutte come trattini, <wbr> fallisce , ­ fallisce tutte come trattini
• IE8 (Win7): ­ fallisce tutte come trattini, <wbr> fallisce , ­ fallisce tutte come trattini
• IE7 (Win7): ­ fallisce tutte come trattini, <wbr> fallisce , ­ fallisce tutte come trattini

Corrispondenza dei motori di ricerca

Aggiornato a novembre 2017. <wbr>non testato perché il CMS di StackOverflow l'ha eliminato.

Operazione riuscita: le ricerche nel complesso, la parola non sillabata trova questa pagina.

Fallimento: i motori di ricerca trovano questa pagina solo nelle ricerche per i segmenti rotti delle parole o una parola con trattini.

• Google: ­fallisce, ­riesce
• Bing: ­fallisce, ­fallisce
• Baidu: ­fail, ­fail (può abbinare frammenti all'interno di stringhe più lunghe ma non le parole da sole contenenti un ­o ­)
• Yandex: ­fallisce, ­riesce (anche se è possibile che corrisponda a un frammento di stringa come Baidu, non sicuro al 100%)

Trova sulla pagina attraverso i browser

Successo e fallimento come corrispondenza dei motori di ricerca.

• Chrome (40.0.2214.115, Mac): ­successo, <wbr>successo, ­successo
• Firefox (35.0.1, Mac): ­successo, <wbr>successo, ­successo
• Safari (6.1.2, Mac): ­successo, <wbr>successo, ­successo
• IE10 (Win7): ­ falliscono solo le partite quando entrambe contengono trattini timidi, <wbr>successo, ­ falliscono solo le partite quando entrambe contengono trattini timidi
• IE8 (Win7): ­ falliscono solo le partite quando entrambe contengono trattini timidi, <wbr>successo, ­ falliscono solo le partite quando entrambe contengono trattini timidi
• IE7 (Win7): ­ falliscono solo le partite quando entrambe contengono trattini timidi, <wbr>successo, ­ falliscono solo le partite quando entrambe contengono trattini timidi

È in corso uno sforzo per standardizzare la sillabazione in CSS3 .

Alcuni browser moderni, in particolare Safari e Firefox, lo supportano già. Ecco un riferimento valido e aggiornato sul supporto del browser .

Una volta implementata la sillabazione CSS universalmente, quella sarebbe la soluzione migliore. Nel frattempo, posso consigliare Hyphenator , uno script JS che spiega come sillabare il testo nel modo più appropriato per un determinato browser.

Hyphenator:

• si affida all'algoritmo di sillabazione di Franklin M. Liang , comunemente noto da LaTeX e OpenOffice.
• usa la sillabazione CSS3 dove è disponibile,
• si inserisce automaticamente ­sulla maggior parte degli altri browser,
• supporta più lingue,
• è altamente configurabile,
• ricade con grazia nel caso in cui JavaScript non sia abilitato.

L'ho usato e funziona benissimo!

Io uso ­, inserito manualmente dove necessario.

Trovo sempre un peccato che le persone non usino le tecniche perché c'è un browser, forse vecchio o strano, attorno al quale non le gestisce nel modo in cui sono state specificate. Ho scoperto che ­funziona correttamente in entrambi i recenti browser Internet Explorer e Firefox, che dovrebbe essere sufficiente. Puoi includere un controllo del browser che dice alle persone di usare qualcosa di maturo o di continuare a loro rischio se arrivano con uno strano browser.

La sillabazione non è così semplice e non posso raccomandare di lasciarlo a Javascript . Si tratta di un argomento specifico della lingua e potrebbe essere necessario rivederlo attentamente dal deskman se non si desidera che il testo venga irritato. Alcune lingue, come il tedesco, formano parole composte e possono portare a problemi di decomposizione. Ad esempio Spargelder( germ. Risparmiato, pl.) Può, in base alle regole di sillabazione, essere racchiuso in due punti ( Spar-gel-der). Tuttavia, avvolgendolo nella seconda posizione, trasforma la prima parte in modo da apparire come Spargel-( germ. Asparagi), attivando un concetto completamente fuorviante nella testa del lettore e quindi dovrebbe essere evitato.

E la stringa Wachstube? Potrebbe significare "guardroom" ( Wach-stu-be) o "tube of wax" ( Wachs-tu-be). Probabilmente potresti trovare altri esempi anche in altre lingue. Dovresti mirare a fornire un ambiente in cui il deskman possa essere supportato nella creazione di un testo ben sillabato, rilegando ogni parola critica.

È molto importante notare che, a partire da HTML5, <wbr>e ­ non dovrebbero fare la stessa cosa !

Trattini morbidi

­è un trattino morbido, cioè U + 00AD: SOFT HYPHEN. Per esempio,

innehålls­förteckning

potrebbe essere reso come

innehållsförteckning

o come

innehålls-
förteckning

Ad oggi, i trattini morbidi funzionano in Firefox, Chrome e Internet Explorer.

L' wbrelemento

L' wbrelemento è un'opportunità di interruzione parola, che non visualizzerà un trattino se si verifica un'interruzione di riga. Per esempio,

ABCDEFG<wbr/>abcdefg

potrebbe essere reso come

ABCDEFGabcdefg

o come

ABCDEFG
abcdefg

Ad oggi, questo elemento funziona in Firefox e Chrome.

L' entità dello spazio di larghezza zero può essere utilizzata al posto del <wbr>tag in modo affidabile praticamente su ogni piattaforma.

​

Utile anche la parola entità falegname , che può essere utilizzata per vietare una pausa. (Inserisci tra ogni carattere di una parola, tranne dove desideri l'interruzione.)

⁠

Con questi due, puoi fare qualsiasi cosa.

Questa è una soluzione crossbrowser che stavo guardando poco fa che gira sul client e usando jQuery:

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

Suggerisco di usare wbr, quindi il codice può essere scritto in questo modo:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

Non condurrà spazio tra i caratteri, mentre ­non fermerà gli spazi creati dalle interruzioni di riga.

Ho usato con successo il carattere unicode del trattino morbido in alcuni browser desktop e mobili per risolvere il problema.

Il simbolo unicode è \u00ADed è abbastanza facile da inserire nella stringa unicode Python come s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Un'altra soluzione è quella di inserire il carattere unicode stesso, e la stringa di origine apparirà perfettamente ordinaria in editor come Sublime Text, Kate, Geany, ecc. (Il cursore sentirà comunque il simbolo invisibile).

Gli editor esadecimali di strumenti interni possono automatizzare facilmente questo compito.

Un facile kludge è usare un carattere raro e visibile, come ¦, che è facile da copiare e incollare, e sostituirlo su un trattino morbido usando, ad esempio, lo script di frontend in $(document).ready(...). Il codice sorgente come s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')è più facile da leggere di s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

A volte i browser Web sembrano essere più indulgenti se si utilizza la stringa Unicode ­anziché l' ­entità.

Se hai sfortuna e devi ancora usare JSF 1, l'unica soluzione è usare & # 173 ;, & shy; non funziona.

<wbr> e & timido;

Oggi puoi usare entrambi.

<wbr> usa per rompere e non mettere più informazioni.

Esempio, utilizzare per mostrare i collegamenti:

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

&timido; quando necessario, a questo punto il testo si spezzerà e aggiungerà un trattino.

Esempio:

"É 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{
  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>