Pas de saut de ligne après un tiret

340

Je cherche à éviter un saut de ligne après un tiret -au cas par cas, 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 se casse et passe à la ligne suivante au lieu de le traiter comme un mot entier ...

3-
3/8"

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

3-&#65279;3/8&rdquo;

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

Ce qui suit est mon doctypeet 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 de les empêcher de rompre la ligne après le tiret? Je n'ai besoin d'aucune solution qui s'applique à l'ensemble de la page ... juste quelque chose que je peux insérer au besoin, comme un "caractère sans interruption de largeur nulle", sauf celui qui fonctionne.

Voici une démo. Rendez simplement le cadre plus étroit jusqu'à ce que la ligne se brise au trait d'union.

http://jsfiddle.net/RagKH/

— Sparky
source

@EricLeschinski, qui a déjà été publié comme réponse: stackoverflow.com/a/12362315/594235

— Sparky

Avec charset = utf-8 vous pouvez mettre - un tiret

— insécable

@QuentinUK, c'est vrai ... n'est-ce pas déjà la réponse acceptée? ‑est un trait d'union insécable.

— Sparky

& # 8209; est ASCII ordinaire, donc utf-8 n'est pas nécessaire. Avec un encodage utf-8 de la page, il est possible de mettre les caractères réels. - n'est pas le même caractère que - bien qu'il ait la même apparence.

— QuentinUK

Le code HTML correct pour ce que vous avez écrit serait 3-3/8″ou 3-3/8″. Les citations ne sont pas des nombres premiers. Si vous le souhaitez en ASCII pur, utilisez simplement des guillemets droits à la place ( "). De préférence, s'il doit être présenté comme un texte bon et lisible, vous utiliserez plutôt 33/8</style>″"3⅜ ″"

— Canned Man

579

Essayez d'utiliser le trait d'union insécable ‑. J'ai remplacé le tiret par ce caractère dans votre jsfiddle, réduit le cadre aussi petit que possible et la ligne ne s'y sépare plus.

— CanSpice
source

10

J'ai pensé que c'était quelque chose comme l'espace insécable, alors j'ai juste recherché 'tiret insécable', et je me suis retrouvé ici . :-)

— CanSpice

Ahhh ... J'ai fait une recherche "sans pause" et j'ai heurté le mur avec ça . Je n'ai jamais pensé qu'il y avait un trait d'union autonome qui ne se briserait pas.

— Sparky

6

Dans IE8 / 9, ce caractère est plus long qu'un trait d'union classique. Il semble avoir la même taille qu'un tableau de bord.

— mrtsherman

21

La raison pour laquelle le résultat peut différer d'un trait d'union normal est que de nombreuses polices ne contiennent pas le trait d'union insécable. Cela oblige les navigateurs à utiliser une police différente, et bien que le trait d'union insécable ressemble au trait d'union normal dans cette police, il n'y a aucune garantie qu'il correspond à un trait d'union normal à partir d'une police différente.

— Jukka K. Korpela

5

Je pense que la réponse de Deb est la meilleure.

— Ray Cheng

257

Vous pouvez également envelopper le texte pertinent avec

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

— Deb
source

17

Oui, c'est une meilleure réponse que celle acceptée à mon humble avis. Merci @Deb.

— CMH

38

@CMH, cela n'aide pas si vous voulez encapsuler des espaces blancs (espaces vides où l'utilisateur voit des espaces blancs - rien) mais vous ne voulez pas séparer les mots par des tirets, par exemple le mot "e-mail". La réponse acceptée aide dans ce cas

— xmojmr

12

Dans ce cas, vous pouvez simplement utiliser span uniquement autour de "e-mail".

— guirto

3

@CMH, c'est une bonne réponse qui fonctionne aussi, donc j'ai voté pour. Cependant, j'ai choisi de ne pas accepter cette réponse car j'ai demandé un caractère qui ne passerait pas automatiquement à la ligne suivante. Le fait qu'un "trait d'union insécable" ( ‑) puisse être légèrement plus long qu'un trait d'union normal dans certains navigateurs était pour moi trivial.

— Sparky

11

@Sparky Un problème avec l'utilisation de différents caractères est qu'il gâche les résultats de la recherche. Essayer de trouver "3-3 / 8" sur la page ne trouvera pas le trait d'union insécable.

— M. Lister

23

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 typique. Cette différence d'affichage a été une rupture 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 d'IE8 / 9 sur un trait d'union.

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

IE le rend comme ceci.

Exemple de coupure de tiret dans IE8 / 9

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

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

— mrtsherman
source

6

L'utilisation nobrest la méthode la plus multi-navigateur et fonctionne indépendamment des polices et du CSS. L' nobrélément n'est pas défini dans les spécifications HTML, mais cela ne doit être considéré que comme une formalité. Mais si vous devez écrire par des spécifications HTML, la réponse de Deb, en utilisant CSS, est la meilleure option.

— Jukka K. Korpela

5

Je suis curieux de savoir pourquoi vous ne pouvez pas utiliser la solution CSS.

— Ryan Ahearn

2

@RyanAhearn - J'utilise un outil tiers qui ne me donne pas beaucoup de contrôle sur le HTML. Il ne prend pas en charge les déclarations de balises en ligne.

— mrtsherman

Au lieu de «», ne pourriez-vous pas simplement utiliser un span avec une classe et le contrôler à l'aide du CSS?

— StephenESC

1

Notez que la nobrbalise n'est pas standard et peut se casser à tout moment. La documentation MDN ne recommande pas d'utiliser cette balise: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

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

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

Sinon, cela peut être fait en utilisant le codage 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+FEFFEspace ^{^{sans interruption de largeur nulle}} " ^{^{[⁠ ⁠1]}} :

red-&#xfeff;brown

et (équivalent décimal):

red-&#65279;brown

^{[1] : Notez que bien que cette méthodefonctionne toujours dans les principaux navigateurs comme Chrome, elle est déconseillée depuis Unicode 3.2 .}

Comparaison de "la voie du menuisier" avec " U+2011Trait d'union insécable ":

Le mot menuisier peut être utilisé pour tous les autres caractères, pas seulement les tirets.
Lorsque vous utilisez le menuisier, la plupart des moteurs de rendu pixellisent le texte de manière identique . Sur Chrome, FireFox, IE et Opera, le rendu des tirets normaux, par exemple:

abcdefghijklmnopqrstu-vwxyz

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 insécable ", 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'étendue de la différence dépend du navigateur et de la police. Par exemple, lorsque vous utilisez une déclaration de police de " arial", Firefox et IE11 affichent des variations relativement énormes, tandis que Chrome et Opera présentent des variations plus petites.)

Comparaison de "the joiner way" avec (CSS .c1 {white-space:nowrap;}) et :

Le mot menuisier peut être utilisé dans les situations où l'utilisation des balises HTML est restreinte, par exemple les formes de sites Web et de forums.
Sur le spectre de la présentation et du contenu , la majorité jugera le menuisier plus proche du contenu, par rapport aux balises.

^{• Testé sur Windows 8.1 Core 64 bits avec:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (version officielle) m (32 bits)

    • Opera 35.0.2066.92}

— Pacerier
source

Il semble que "Espace sans interruption U + FEFF de largeur nulle" ne fonctionne pas correctement dans IE11.

— Ivan Gusev

Il semble que "U + 2060" ne fonctionne pas si "-" est suivi d'un caractère unicode: comme cecibingo-⁠bongo

— Ivan Gusev

Malgré la presse négative constante

— JamesWilson

6

Tard dans la soirée, mais je pense que c'est en fait le plus élégant. Utilisez le caractère Unicode WORD JOINER & # 8288 ; de chaque côté de votre trait d'union, ou tiret cadratin, ou n'importe quel caractère.

Alors, comme ça:

&#8288;—&#8288;

Cela joindra le symbole aux deux extrémités à ses voisins (sans ajouter d'espace) et empêchera la rupture de ligne.

— Eckstein
source

J'ai pu faire fonctionner cela en utilisant ALT + 0173 (trait d'union souple) pour une raison quelconque sur Windows 10.

— pspahn