web-dev-qa-db-fra.com

Pas de retour à la ligne après un trait d'union

Je cherche à empêcher un saut de ligne après un trait d'union - au cas par cas, compatible avec tous les navigateurs.

Exemple:

J'ai ce texte: 3-3/8" qui en HTML est ceci: 3-3/8”

Le problème est que près de la fin d'une ligne, à cause du trait d'union, il casse et passe à la ligne suivante au lieu d'être traité comme un mot complet ...

3-
3/8"

J'ai essayé d'insérer le "caractère de largeur zéro sans pause",  sans succès ...

3-3/8”

Je vois cela dans Safari et je pense que ce sera la même chose dans tous les navigateurs.

Ce qui suit est mon doctype et le codage de caractères ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Existe-t-il un moyen d'empêcher ces ruptures de ligne après le trait d'union? Je n'ai besoin d'aucune solution qui s'applique à la page entière ... juste quelque chose que je peux insérer au besoin, comme un "caractère de largeur nulle, sans rupture", sauf celle qui fonctionne.

Voici une démo. Il suffit de rendre le cadre plus étroit jusqu'à ce que la ligne se sépare du trait d'union.

http://jsfiddle.net/RagKH/

htmlcsscharacter-encodingline-breakshyphenation
313
Sparky

Essayez d’utiliser le trait d’union insécable &#8209;. J'ai remplacé le tiret par ce personnage dans votre jsfiddle, rétréci le cadre le plus petit possible, et la ligne ne se sépare plus.

549
CanSpice

Vous pouvez également envelopper le texte pertinent avec

<span style="white-space: nowrap;"></span>
240
Deb

IE8/9 rend le trait d'union insécable mentionné dans la réponse de CanSpice plus long qu'un trait d'union typique. C'est la longueur d'un tiret au lieu d'un trait d'union. Cette différence d’affichage a été un facteur décisif pour moi.

Comme je ne pouvais pas utiliser la réponse CSS spécifiée par Deb, j'ai plutôt choisi de ne pas utiliser de balises break.

<nobr>e-mail</nobr>

De plus, j'ai trouvé un scénario spécifique qui a provoqué la rupture de IE8/9 sur un trait d'union.

  • Une chaîne contient des mots séparés par des espaces insécables - &nbsp;
  • La largeur est limitée
  • Contient un tiret

IE le rend comme ça.

Example of hyphen breaking in IE8/9

Le code suivant reproduit le problème illustré ci-dessus. J'ai dû utiliser une balise méta pour forcer le rendu sur IE9, car IE10 a résolu le problème. Pas de violon car il ne supporte pas les balises méta.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>
21
mrtsherman

Vous pouvez également le faire "à la manière du menuisier" en insérant " _U+2060_ Word Joiner ".

Si Accept-Charset le permet, le caractère unicode lui-même peut être inséré directement dans la sortie HTML.

Sinon, vous pouvez utiliser l'encodage d'entité. Par exemple. pour joindre le texte _red-brown_, utilisez:

_red-&#x2060;brown
_

ou (équivalent décimal):

_red-&#8288;brown
_

. Un autre caractère utilisable est "_U+FEFF_ Zero Width No-Break Space"[⁠ ⁠1]:

_red-&#xfeff;brown
_

et (équivalent décimal):

_red-&#65279;brown
_

[1] : Notez que même si cette méthode reste fonctionne dans les principaux navigateurs tels que Chrome, il est obsolète depuis Unicode 3.2 .

Comparaison de "la méthode du menuisier" avec " _U+2011_ Trait d'union insécable ":

  • Le menuisier Word peut être utilisé pour tous les autres caractères, pas seulement les traits d'union.

  • Lorsque vous utilisez le menuisier Word, la plupart des moteurs de rendu pixellisent le texte à l'identique . Sur Chrome, FireFox, IE et Opera, le rendu des tirets normaux, par exemple:

    a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z

    est identique au rendu des traits d'union normaux (avec U + 2060 Word Joiner), par exemple:

    a-⁠b-⁠c-⁠d-e-f-⁠g-⁠h-⁠i-j-k-l-m-n-⁠o-p-⁠q- R-⁠s-⁠t-u-⁠v-⁠w-⁠x-⁠y-⁠z

    tandis que les deux rendus ci-dessus diffèrent du rendu de " Trait d'union ", par exemple:

    a-b-c-d-e-f-g-h-i-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y z

    . (L’ampleur de la différence dépend du navigateur et des polices. Par exemple, lorsque vous utilisez une déclaration de police de caractères "arial", Firefox et IE11 affichent des variations relativement importantes, tandis que Chrome et Opera affiche des variations plus petites.)

Comparaison de "la méthode du menuisier" avec _<span class=c1></span>_ (CSS _.c1 {white-space:nowrap;}_) et _<nobr></nobr>_:

  • Le menuisier Word peut être utilisé dans des situations où l'utilisation des balises HTML est restreinte, par exemple. formes de sites Web et de forums.

  • Sur le spectre de présentation et de conten , la majorité considérera le menuisier Word comme plus proche du contenu, par rapport aux balises.

• Comme testé sur Windows 8.1 Core 64 bits en utilisant:
• IE 11.0.9600.18205
• Firefox 43.0.4
• Chrome 48.0.2564.109 (version officielle) m (32 bits)
• Opera 35.0.2066.92

16
Pacerier

En retard pour la fête, mais je pense que c'est en fait le plus élégant. Utilisez le caractère Unicode Word JOINER & # 8288 ; de part et d'autre de votre tiret, de votre tiret, ou de n'importe quel caractère.

Donc, comme si:

&#8288;—&#8288;

Cela joindra le symbole des deux côtés à ses voisins (sans ajouter d'espace) et empêchera les sauts de ligne.

4
Eckstein