Le trait d'Union en HTML (vs. )

Question

Le trait d'Union en HTML (vs. )

comment résoudre le problème avec des traits d'Union doux sur vos pages web? Dans un texte, il peut y avoir de longs mots que vous pourriez vouloir aligner rupture avec un trait d'Union. Mais vous ne voulez pas que le trait d'Union montre si le mot entier est sur la même ligne.

Selon les commentaires sur cette page  est un non standard", la soupe de tags inventé par Netscape". Il semble que  ait aussi des problèmes de conformité aux normes . Il semble y avoir aucun moyen d'obtenir une solution de travail pour tous les navigateurs .

Quelle est votre méthode pour manipuler les traits d'Union souples et pourquoi l'avez-vous choisie? Est-il une solution ou une meilleure pratique?

Voir aussi Discussion ici .

125

html soft-hyphen text wbr

demandé sur Community 2008-10-22 20:00:44

11 réponses

l'entité zero-width space peut être utilisée de manière fiable à la place de  sur pratiquement toutes les plateformes.



aussi utile est le entité de menuisier de mot , qui peut être utilisé pour interdire une pause. (Insérer entre chaque caractère du mot, sauf si vous voulez la pause.)

⁠

avec ces deux - là, on peut tout faire.

4

répondu AVL geek 2016-11-12 00:38:41

c'est une solution de crossbrowser que je regardais il y a peu et qui fonctionne 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);

2

répondu anthonyv 2010-01-19 05:28:04

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

这里有一段很长，很长的文字；这里有一段

ne conduira pas l'espace entre les charaters, tandis que  n'arrêtera pas les espaces créés par les sauts de ligne.

2

répondu Weijing Jay Lin 2016-01-15 23:22:22

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

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

une autre solution est d'insérer le char unicode lui-même, et la chaîne de caractères source aura l'air parfaitement ordinaire dans les éditeurs comme Sublime Text, Kate, Geany, etc (curseur sentira l'invisible symbole).

HEX les éditeurs d'outils maison peuvent automatiser cette tâche facilement.

un kludge facile est d'utiliser le caractère rare et visible, comme ¦ , qui est facile à copier et coller, et de le remplacer sur le trait d'Union doux en utilisant, par exemple frontend script 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ния' .

1

répondu dmitry_romanov 2016-11-12 01:12:18

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

0

répondu Tommy Kronkvist 2014-02-20 21:33:26

si vous avez de la malchance et doit encore utiliser JSF 1, alors la seule solution est d'utiliser , ne fonctionne pas.

0

répondu Jaap D 2014-12-30 07:29:21

score 104 · Answer 1

~~Malheureusement", 151900920" 's de soutien est donc pas uniforme entre les navigateurs qu'il ne peut pas vraiment être utilisé.~~

~~QuirksMode est juste, il n'y a pas de bonne façon d'utiliser des traits d'union dans le HTML. Voyez ce que vous pouvez faire pour partir sans eux.~~

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

score 37 · Answer 2

fév 2015 résumé (partiellement mis à jour Nov 2017)

ils fonctionnent tous assez bien,  contours comme Google peut encore index des mots qui le contiennent.

dans les navigateurs:  et  les deux s'affichent comme prévu dans les navigateurs principaux (même vieux IE!).  n'est pas supporté 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, sur Windows (10), il conserve les caractères et les traits d'Union durs dans Bloc-Notes et les traits d'Union mous invisibles dans les applications qui les supportent. IE (win7) colle toujours avec des traits d'Union, même dans IE10, et Safari (Mac) copie d'une manière qui colle comme des traits d'Union dans certaines applications( par exemple MS Word), mais pas d'autres
trouver à la page fonctionne pour  et  sur tous les navigateurs sauf IE qui ne correspond qu'à exact copied-and-pasted matches (même jusqu'à IE11)
moteurs de recherche: Google associe des mots contenant  à des mots dactylographiés normalement. À partir de 2017, il ne semble plus correspondre aux mots contenant  . Yandex semble être la même chose. Bing et Baidu semblent ne pas correspondre non plus.

Tester

pour une mise à jour des tests en direct, voici quelques exemples de mots uniques avec des traits d'Union doux.

 - confumbabblicationism - confumbabblicationism
- ..............................................................................................................confumbabblicationism
- ..................................................................................................................confumbabblicationism

 - donfounbabblicationism . Ce site supprime  de la sortie. Voici un jsbin.com extrait d'essai .

 - eonfulbabblicationism - eonfulbabblicationism
- .................................................................................................................eonfulbabblicationism
- ....................................................................................................................eonfulbabblicationism

ici ils sont sans traits d'Union timides (ceci est pour copier et coller dans find-on-page test; écrit d'une manière qui ne pas casser le moteur de recherche, de tests):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

affichage sur les navigateurs

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

défaillance: affichage inhabituel, ou défaut de casser à l'endroit prévu.

Chrome (40.0.2214.115, Mac):  success,  succès,  succès
Firefox 35.0.1, Mac):  succès", 151930920" succès", 151900920" succès
Safari (6.1.2, Mac):  succès", 151930920" pas encore testé ,  succès
Edge (Windows 10):  succès", 151930920" fail (pause mais pas de trait d'union),  succès
IE11 (Windows 10):  succès", 151930920" fail (pas de rupture),  succès
IE10 (Windows 10):  succès", 151930920" fail (pas de rupture),  succès
IE8 (Windows 7): erratic - parfois, aucun d'eux ne fonctionne du tout et ils tous simplement suivre css word-wrap . Parfois, ils semblent tous les travaux. Pas encore trouvé de modèle clair pourquoi.
IE7 (Windows 7):  succès", 151930920" succès", 151900920" succès

copier-coller sur les navigateurs

Succès: copier et coller le mot en entier, unhyphenated. (testé sur Mac coller dans la recherche de navigateur, MS Word 2011, et Sublime texte)

echec: collage avec un trait d'Union, espace, saut de ligne, ou avec des caractères de camelote.

Chrome (40.0.2214.115, Mac):  succès,  succès,  succès
Firefox 35.0.1, Mac):  succès", 151930920" succès", 151900920" succès
Safari (6.1.2, Mac):  fail dans MS Word (paste all as hyphens), succès dans d'autres applications  fail ,  échec dans MS Word (pâtes tout comme les traits d'union), le succès dans d'autres applications
IE10 (Win7):  fail colle tous les tirets,  fail ,  fail colle tous les tirets
IE8 (Win7):  fail colle tous les tirets,  fail ,  fail pâtes tout comme les traits d'union
IE7 (Win7):  fail colle tous les tirets,  fail ,  fail colle tous les tirets

"1519870920 moteur de Recherche" matching

mis à jour en novembre 2017.  non testé car le CMS de StackOverflow l'a dépouillé.

succès: recherches dans l'ensemble, mot sans trait d'Union trouvez cette page.

echec: les moteurs de recherche ne trouvent cette page que sur les recherches des segments cassés des mots, ou un mot avec des traits d'Union.

Google:  échoue,  succède
Bing:  échoue,  échoue
Baidu:  échoue,  échoue (peut correspondre à des fragments dans des chaînes plus longues, mais pas les mots sur leur propre contenant un  ou  )
Yandex:  échoue,  réussit (même si c'est possible, il est correspondant à un fragment de chaîne comme Baidu, pas sûr à 100%)

trouver à la page sur les navigateurs

Succès et l'échec en tant que moteur de recherche, de mise en correspondance.

Chrome (40.0.2214.115, Mac):  succès,  succès,  succès
Firefox 35.0.1, Mac):  succès", 151930920" succès", 151900920" succès
Safari (6.1.2, Mac):  succès", 151930920" succès", 151900920" succès
IE10 (Win7):  fail seulement les allumettes contenant des traits d'Union timides,  succès,  fail seulement les allumettes contenant des traits d'Union timides
IE8 (Win7):  fail valide seulement lorsque les deux contiennent timide traits d'union,  succès", 151900920" fail valide seulement lorsque les deux contiennent timide traits d'union
IE7 (Win7):  fail seulement les allumettes contenant des traits d'Union timides,  succès,  fail seulement les allumettes contenant des traits d'Union timides

score 28 · Answer 3

il y a un effort continu pour standardiser hyphénation dans CSS3 .

certains navigateurs modernes, notamment Safari et Firefox, le supportent déjà. Voici une bonne et à jour référence sur la prise en charge du navigateur .

une fois que le trait d'Union CSS sera appliqué universellement, ce sera la meilleure solution. En attendant, je peux recommander Hyphenator - un script JS qui découvrez comment créer un trait d'union entre vos textes de la manière la plus appropriée pour un navigateur particulier.

Hyphenator:

s'appuie sur Franklin M. Liangs hyphenation algorithm , communément connu à partir de LaTeX et OpenOffice.
utilise un trait d'Union CSS3 lorsqu'il est disponible,
insère automatiquement  sur la plupart des autres navigateurs,
soutient plusieurs langues,
est hautement configurable,
recule gracieusement au cas où javascript n'est pas activé.

je l'ai déjà utilisé et il fonctionne très bien!

score 18 · Answer 4

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 vieux ou étrange-qui ne les gère pas de la façon dont ils ont été spécifiés. J'ai découvert que  fonctionne correctement dans les navigateurs Internet Explorer et Firefox récents, cela devrait suffire. Vous pouvez inclure une vérification du navigateur pour dire aux gens d'utiliser quelque chose de mature ou de continuer à leurs propres risques si ils viennent avec un étrange navigateur.

Syllabification n'est pas facile et je ne peux pas recommander en la laissant un peu de Javascript . C'est une langue spécifique sujet et peut-être besoin d'être soigneusement révisé par le deskman si vous ne voulez pas transformer votre texte 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. économisé de l'argent, pl.) peut, selon les règles de syllabification, être enveloppé dans deux endroits ( Spar-gel-der ). Toutefois, en l'enveloppant dans la deuxième position, tourne la première partie de montrer que Spargel- ( germe. asparagus), activant un concept complètement trompeur dans la tête du lecteur et doit donc être évitée.

Et la chaîne Wachstube ? Il peut s'agir de "guardoom" ( Wach-stu-be ) ou de "tube de cire" ( Wachs-tu-be ). Vous trouverez probablement d'autres exemples dans d'autres langues. vous devez vous efforcer de fournir un environnement dans lequel le deskman peut être soutenu dans la création d'un texte bien syllabifié, la correction d'épreuves de chaque mot critique.

score 10 · Answer 5

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

Doux traits d'union

 est un trait d'Union doux, i.e., U+00AD: trait d'Union doux. Par exemple,

innehålls&shy;förteckning

pourrait être rendu comme

innehållsförteckning

ou

innehålls-
förteckning

As de nos jours, les traits d'Union doux fonctionnent dans Firefox, Chrome, et Internet Explorer.

l'élément wbr 1519130920"

l'élément est une occasion de casse de mots, qui n'affichera pas de trait d'Union si une rupture de ligne se produit. Par exemple,

ABCDEFGabcdefg

pourrait être rendu comme

ABCDEFGabcdefg

ou

ABCDEFG abcdefg

As aujourd'hui, cet élément fonctionne dans Firefox et Chrome.

score 4 · Answer 6

l'entité zero-width space peut être utilisée de manière fiable à la place de  sur pratiquement toutes les plateformes.

&#8203;

aussi utile est le entité de menuisier de mot , qui peut être utilisé pour interdire une pause. (Insérer entre chaque caractère du mot, sauf si vous voulez la pause.)

&#8288;

avec ces deux - là, on peut tout faire.

score 2 · Answer 7

c'est une solution de crossbrowser que je regardais il y a peu et qui fonctionne 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);

score 2 · Answer 8

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

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

ne conduira pas l'espace entre les charaters, tandis que  n'arrêtera pas les espaces créés par les sauts de ligne.

score 1 · Answer 9

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

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

une autre solution est d'insérer le char unicode lui-même, et la chaîne de caractères source aura l'air parfaitement ordinaire dans les éditeurs comme Sublime Text, Kate, Geany, etc (curseur sentira l'invisible symbole).

HEX les éditeurs d'outils maison peuvent automatiser cette tâche facilement.

un kludge facile est d'utiliser le caractère rare et visible, comme ¦ , qui est facile à copier et coller, et de le remplacer sur le trait d'Union doux en utilisant, par exemple frontend script 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ния' .

score 0 · Answer 10

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

score 0 · Answer 11

si vous avez de la malchance et doit encore utiliser JSF 1, alors la seule solution est d'utiliser , ne fonctionne pas.

Las etiquetas más populares

Le trait d'Union en HTML (vs. )

11 réponses

fév 2015 résumé (partiellement mis à jour Nov 2017)

Tester

affichage sur les navigateurs

copier-coller sur les navigateurs

trouver à la page sur les navigateurs