329 votes

Pas de saut de ligne après un trait d'union

Je cherche à éviter un saut de ligne après un trait d'union. - au cas par cas, qui soit compatible avec tous les navigateurs.

Exemple :

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

Le problème est que vers la fin d'une ligne, à cause du trait d'union, il s'interrompt et passe à la ligne suivante au lieu de le traiter comme un mot complet...

3-
3/8"

J'ai essayé d'insérer le caractère "zero width no break",  sans succès...

3-3/8”

Je vois cela dans Safari et je pense que c'est la même chose dans tous les navigateurs.

Ce qui suit est mon doctype et le codage des 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 le saut de ligne après le trait d'union ? Je n'ai pas besoin d'une solution qui s'applique à l'ensemble de la page... juste quelque chose que je puisse insérer selon les besoins, comme un "caractère de rupture de largeur nulle", mais une solution qui fonctionne.

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

http://jsfiddle.net/RagKH/

564voto

CanSpice Points 14749

Essayez d'utiliser le trait d'union insécable &#8209; . J'ai remplacé le tiret par le caractère de votre jsfiddle, j'ai réduit le cadre au maximum, et la ligne ne se sépare plus à cet endroit.

251voto

Deb Points 795

Vous pouvez également entourer le texte concerné de

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

22voto

mrtsherman Points 19573

IE8/9 rend le trait d'union insécable mentionné dans la réponse de CanSpice plus long qu'un trait d'union classique. Il a la longueur d'un tiret en et non d'un trait d'union classique. Cette différence d'affichage a été un facteur de rupture pour moi.

Comme je ne pouvais pas utiliser la réponse CSS spécifiée par Deb, j'ai opté pour l'utilisation de balises sans rupture.

<nobr>e-mail</nobr>

En outre, j'ai trouvé un scénario spécifique qui provoquait la rupture d'IE8/9 sur un trait d'union.

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

IE le rend comme ceci.

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 vers IE9 car IE10 a corrigé le problème. Pas de bidouillage car il ne supporte pas les meta tags.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X