Comment résolvez-vous le problème des traits d'union souples sur vos pages Web? Dans un texte, il peut y avoir des mots longs que vous souhaiterez peut-être couper la ligne avec un tiret. Mais vous ne voulez pas que le trait d'union indique si le mot entier est sur la même ligne.

Selon les commentaires sur cette page, il <wbr> y a une "soupe aux balises inventée par Netscape" non standard. Il semble y ­ avoir aussi des problèmes de conformité aux normes . Il semble qu'il n'y ait aucun moyen d'obtenir une solution fonctionnelle pour tous les navigateurs .

Quelle est votre façon de gérer les traits d'union souples et pourquoi l'avez-vous choisi? Existe-t-il une solution préférée ou une meilleure pratique?

Malheureusement, &shyle support de est tellement incohérent entre les navigateurs qu'il ne peut pas vraiment être utilisé.

QuirksMode a raison - il n'y a pas de bon moyen d'utiliser des tirets souples en HTML pour le moment. Voyez ce que vous pouvez faire pour vous en passer.

2013 edit: Selon QuirksMode , ­fonctionne maintenant / est pris en charge sur tous les principaux navigateurs.

Résumé de février 2015 (partiellement mis à jour en novembre 2017)

Ils fonctionnent tous plutôt bien, ­car Google peut toujours indexer les mots les contenant.

• Dans les navigateurs: ­ et les ­deux s'affichent comme prévu dans les principaux navigateurs (même l'ancien IE!). <wbr>n'est pas pris en charge dans les versions récentes d'IE (10 ou 11) et ne fonctionne pas correctement dans Edge.
• Lorsqu'il est copié et collé à partir de navigateurs: (testé en 2015) comme prévu pour ­et ­pour Chrome et Firefox sur Mac, sous Windows (10), il conserve les caractères et colle les traits d'union dans le Bloc-notes et les traits d'union invisibles dans les applications qui les prennent en charge. IE (win7) colle toujours avec des tirets, même dans IE10, et les copies Safari (Mac) d'une manière qui colle comme des traits d'union dans certaines applications (par exemple MS Word), mais pas dans d'autres
• La recherche sur la page fonctionne pour ­et ­sur tous les navigateurs sauf IE qui ne correspond qu'aux correspondances exactes copiées-collées (même jusqu'à IE11)
• Moteurs de recherche: Google fait correspondre les mots contenant ­avec des mots tapés normalement. Depuis 2017, il semble ne plus correspondre aux mots contenant ­. Yandex semble être le même. Bing et Baidu semblent ne pas correspondre non plus.

Essaye-le

Pour des tests en direct à jour, voici quelques exemples de mots uniques avec des tirets souples.

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

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Ce site supprime <wbr/>de la sortie. Voici un extrait de jsbin.com à tester .

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

Les voici sans traits d'union timides (c'est pour copier et coller dans les tests de recherche sur la page; écrit d'une manière qui ne cassera pas les tests des moteurs de recherche):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Affichage sur tous les navigateurs

Succès: affichage comme un mot normal, sauf là où il doit se casser, quand il se brise et se coupe à l'endroit spécifié.

Échec: affichage inhabituel ou échec de rupture à l'endroit prévu.

• Chrome (40.0.2214.115, Mac): ­succès, <wbr>succès, ­succès
• Firefox (35.0.1, Mac): ­succès, <wbr>succès, ­succès
• Safari (6.1.2, Mac): ­succès, <wbr> pas encore testé , ­succès
• Edge (Windows 10): ­succès, <wbr> échec (rupture mais pas de trait d'union), ­succès
• IE11 (Windows 10): ­succès, <wbr> échec (pas de pause), ­succès
• IE10 (Windows 10): ­succès, <wbr> échec (pas de pause), ­succès
• IE8 (Windows 7): erratique - parfois, aucun d'entre eux ne fonctionne du tout et ils suivent tous simplement le CSS word-wrap. Parfois, ils semblent tous fonctionner. Pas encore trouvé de modèle clair pour expliquer pourquoi.
• IE7 (Windows 7): ­succès, <wbr>succès, ­succès

Copier-coller dans les navigateurs

Succès: copier et coller le mot entier, sans trait d'union. (testé sur Mac collé dans la recherche du navigateur, MS Word 2011 et Sublime Text)

Échec: collage avec un trait d'union, un espace, un saut de ligne ou avec des caractères indésirables.

• Chrome (40.0.2214.115, Mac): ­succès, <wbr>succès, ­succès
• Firefox (35.0.1, Mac): ­succès, <wbr>succès, ­succès
• Safari (6.1.2, Mac): ­ échec dans MS Word (colle tout comme tiret), <wbr> échec du succès dans d'autres applications , ­ échec dans MS Word (colle tout comme trait d'union), succès dans d'autres applications
• IE10 (Win7): ­ échoue colle tout comme tirets, <wbr> échoue , ­ échoue colle tout comme traits d'union
• IE8 (Win7): ­ échoue colle tout comme tirets, <wbr> échoue , ­ échoue colle tout comme traits d'union
• IE7 (Win7): ­ échoue colle tout comme tirets, <wbr> échoue , ­ échoue colle tout comme traits d'union

Correspondance avec les moteurs de recherche

Mis à jour en novembre 2017. <wbr>non testé car le CMS de StackOverflow l'a supprimé.

Succès: recherche dans son ensemble, mot sans trait d'union trouver cette page.

Échec: les moteurs de recherche ne trouvent cette page que lors de la recherche des segments cassés des mots, ou d'un mot avec des tirets.

• Google: ­échoue, ­réussit
• Bing: ­échoue, ­échoue
• Baidu: ­échoue, ­échoue (peut faire correspondre des fragments dans des chaînes plus longues mais pas les mots contenant un ­ou ­)
• Yandex: ­échoue, ­réussit (bien qu'il soit possible qu'il corresponde à un fragment de chaîne comme Baidu, pas sûr à 100%)

Rechercher sur la page dans tous les navigateurs

Succès et échec en tant que moteur de recherche correspondant.

• Chrome (40.0.2214.115, Mac): ­succès, <wbr>succès, ­succès
• Firefox (35.0.1, Mac): ­succès, <wbr>succès, ­succès
• Safari (6.1.2, Mac): ­succès, <wbr>succès, ­succès
• IE10 (Win7): ­ échoue les correspondances uniquement lorsque les deux contiennent des tirets timides, <wbr>succès, ­ échoue uniquement les correspondances lorsque les deux contiennent des tirets timides
• IE8 (Win7): ­ échoue les correspondances uniquement lorsque les deux contiennent des tirets timides, <wbr>succès, ­ échoue uniquement les correspondances lorsque les deux contiennent des traits d'union timides
• IE7 (Win7): ­ échoue uniquement les correspondances lorsque les deux contiennent des tirets timides, <wbr>succès, ­ échoue uniquement les correspondances lorsque les deux contiennent des traits d'union timides

Il y a un effort continu pour normaliser la césure dans CSS3 .

Certains navigateurs modernes, notamment Safari et Firefox, le prennent déjà en charge. Voici une bonne référence à jour sur la prise en charge des navigateurs .

Une fois la césure CSS implémentée universellement, ce serait la meilleure solution. En attendant, je peux recommander Hyphenator - un script JS qui explique comment couper votre texte de la manière la plus appropriée pour un navigateur particulier.

Césure:

• s'appuie sur l' algorithme de césure de Franklin M. Liang , communément connu de LaTeX et OpenOffice.
• utilise la césure CSS3 là où elle est disponible,
• s'insère automatiquement ­sur la plupart des autres navigateurs,
• prend en charge plusieurs langues,
• est hautement configurable,
• revient gracieusement au cas où javascript n'est pas activé.

Je l'ai utilisé et ça marche très bien!

J'utilise ­, inséré manuellement si nécessaire.

Je trouve toujours dommage que les gens n'utilisent pas de techniques parce qu'il y a un navigateur - peut-être ancien ou étrange - qui ne les gère pas comme ils ont été spécifiés. J'ai trouvé que cela ­fonctionnait correctement dans les navigateurs Internet Explorer et Firefox récents, cela devrait suffire. Vous pouvez inclure une vérification du navigateur indiquant aux gens d'utiliser quelque chose de mature ou de continuer à leurs propres risques s'ils arrivent avec un navigateur étrange.

La syllabification n'est pas si simple et je ne peux pas recommander de la laisser à du Javascript . C'est un sujet spécifique à une langue et peut nécessiter d'être soigneusement révisé par le deskman si vous ne voulez pas que votre texte soit irritant. Certaines langues, comme l'allemand, forment des mots composés et sont susceptibles de conduire à des problèmes de décomposition. Par exemple Spargelder( germ. Argent économisé, pl.) Peut, par les règles de syllabification, être enveloppé à deux endroits ( Spar-gel-der). Cependant, l'enrouler dans la deuxième position, fait tourner la première partie pour qu'elle apparaisse comme Spargel-( germe. Asperges), activant un concept complètement trompeur dans la tête du lecteur et donc à éviter.

Et qu'en est-il de la corde Wachstube? Cela pourrait signifier «salle des gardes» ( Wach-stu-be) ou «tube de cire» ( Wachs-tu-be). Vous trouverez probablement d'autres exemples dans d'autres langues également. Vous devez viser à fournir un environnement dans lequel le deskman peut être aidé à créer un texte bien syllabifié, en relisant chaque mot critique.

Il est très important de noter que, à partir de HTML5, <wbr>et ­ ne sont pas censés faire la même chose !

Trait d'union doux

­est un trait d'union souple, c'est-à-dire U + 00AD: SOFT HYPHEN. Par exemple,

innehålls­förteckning

pourrait être rendu comme

innehållsförteckning

ou comme

innehålls-
förteckning

À partir d'aujourd'hui, les traits d'union souples fonctionnent dans Firefox, Chrome et Internet Explorer.

L' wbrélément

L' wbrélément est une opportunité de saut de mots, qui n'affichera pas de trait d'union si un saut de ligne se produit. Par exemple,

ABCDEFG<wbr/>abcdefg

pourrait être rendu comme

ABCDEFGabcdefg

ou comme

ABCDEFG
abcdefg

À partir d'aujourd'hui, cet élément fonctionne dans Firefox et Chrome.

L' entité d' espace de largeur nulle peut être utilisée à la place d'une <wbr>balise de manière fiable sur pratiquement toutes les plates-formes.

​

Le mot entité joiner , qui peut être utilisé pour interdire une pause, est également utile . (Insérez entre chaque caractère d'un mot, sauf là où vous voulez la pause.)

⁠

Avec les deux, vous pouvez tout faire.

C'est une solution de crossbrowser que je regardais il y a peu de temps qui s'exécute sur le client et en utilisant 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); 

Je suggère d'utiliser wbr, donc le code peut être écrit comme ceci:

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

Il ne fera pas d'espace entre les caractères, et ­n'arrêtera pas les espaces créés par les sauts de ligne.

J'ai utilisé avec succès le caractère unicode d'un trait d'union souple dans quelques navigateurs de bureau et mobiles pour résoudre le problème.

Le symbole unicode est \u00ADet est assez facile à insérer dans une chaîne unicode Python comme s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Une autre solution consiste à insérer le caractère unicode lui-même, et la chaîne source aura l'air parfaitement ordinaire dans les éditeurs comme Sublime Text, Kate, Geany, etc. (le curseur sentira le symbole invisible cependant).

Les éditeurs hexadécimaux d'outils internes peuvent automatiser cette tâche facilement.

Un kludge facile est d'utiliser des caractères rares et visibles, comme ¦, qui sont faciles à copier et coller, et de les remplacer sur un trait d'union souple en utilisant, par exemple, un script frontal dans $(document).ready(...). Le code source comme s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')est plus facile à lire que s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Parfois, les navigateurs Web semblent plus indulgents si vous utilisez la chaîne Unicode ­plutôt que l' ­entité.

Si vous n'avez pas de chance et que vous devez toujours utiliser JSF 1, la seule solution est d'utiliser & # 173 ;, & shy; ne marche pas.

<wbr> et & timide;

Aujourd'hui, vous pouvez utiliser les deux.

<wbr> utilise pour casser et ne pas mettre plus d'informations.

Exemple, utilisez pour afficher les liens:

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

&timide;si nécessaire, à ce stade, le texte se brise et ajoute un trait d'union.

Exemple:

"Je suis & 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>