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

Question

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

Demandé el 7 de Octobre, 2011: Quand la question a-t-elle été
41439 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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-&#65279;3/8&rdquo;

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/

Demandé el 7 de Octobre, 2011 par Sparky

0 votes

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

Commenté el 2 de Novembre, 2016 par Sparky

0 votes

Avec charset=utf-8, vous pouvez mettre un trait d'union non cassant.

Commenté el 13 de Décembre, 2018 par QuentinUK

0 votes

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

Commenté el 13 de Décembre, 2018 par Sparky

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

678voto

CanSpice Points 14749

Essayez d'utiliser le trait d'union insécable ‑ . 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.

Répondu el 7 de Octobre, 2011 par CanSpice (14749 Points )

12 votes

Je me suis dit que c'était quelque chose comme l'espace insécable, alors j'ai cherché "tiret insécable", et a fini ici . :-)

Commenté el 7 de Octobre, 2011 par CanSpice

0 votes

Ahhh... J'ai fait un "aucun caractère de rupture" recherche et frappe le mur avec cette  . Il ne m'est jamais venu à l'esprit qu'il existait un caractère trait d'union autonome qui ne se casse pas.

Commenté el 7 de Octobre, 2011 par Sparky

7 votes

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

Commenté el 6 de Décembre, 2012 par mrtsherman

Afficher 3 autres commentaires

Answer 3

326voto

Deb Points 795

Vous pouvez également entourer le texte concerné de

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

Répondu el 11 de Septembre, 2012 par Deb (795 Points )

19 votes

Oui, c'est une meilleure réponse que celle qui a été acceptée, je pense. Merci @Deb.

Commenté el 16 de Septembre, 2013 par CMH

53 votes

@CMH cela n'aide pas si vous voulez envelopper les espaces blancs (endroits vides où l'utilisateur voit l'espace blanc - rien) mais vous ne voulez pas diviser les mots avec des traits d'union, par exemple le mot "e-mail". La réponse acceptée est utile dans ce cas

Commenté el 8 de Mai, 2014 par xmojmr

14 votes

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

Commenté el 2 de Octobre, 2014 par guirto

Afficher 5 autres commentaires

Answer 4

29voto

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

Répondu el 6 de Décembre, 2012 par mrtsherman (19573 Points )

7 votes

Utilisation de nobr est la méthode la plus compatible avec les navigateurs et fonctionne indépendamment des polices et des CSS. Le site nobr n'est pas défini dans les spécifications HTML, mais cela doit être considéré comme une simple formalité. Mais si vous doit écrit par les spécifications HTML, alors la réponse de Deb, l'utilisation de CSS, est la meilleure option.

Commenté el 26 de Mars, 2013 par Jukka K. Korpela

5 votes

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

Commenté el 25 de Juillet, 2013 par Ryan Ahearn

2 votes

@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.

Commenté el 25 de Juillet, 2013 par mrtsherman

Afficher 3 autres commentaires

Answer 5

26voto

Pacerier Points 15960

Vous pouvez aussi le faire "à la manière du menuisier" en insérant " U+2060 Jointeuse de mots ".

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

Sinon, on peut le faire en utilisant l'encodage des entités. Par exemple, pour joindre le texte red-brown utiliser :

red-&#x2060;brown

ou (équivalent décimal) :

red-&#8288;brown

. Un autre caractère utilisable est " U+FEFF Largeur zéro Espace sans rupture " [ 1 ] :

red-&#xfeff;brown

et (équivalent décimal) :

red-&#65279;brown

[1] : Notez que si cette méthode toujours fonctionne dans les principaux navigateurs comme Chrome, il a est déprécié depuis Unicode 3.2 .

Comparaison entre la "méthode du menuisier" et la "méthode de l'artisan". U+2011 Trait d'union insécable " :

La jonction de mots peut être utilisée pour tous les autres caractères, et pas seulement pour les traits d'union.
Lorsque l'on utilise la machine à joindre les mots, la plupart des moteurs de rendu rastérisent le texte. identiquement . Sur Chrome, FireFox, IE et Opera, le rendu des traits d'union normaux, par ex :

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 ex :

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

alors 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'ampleur de la différence dépend du navigateur et de la police. Par exemple, si vous utilisez une déclaration de police de " arial ", Firefox et IE11 présentent des variations relativement importantes, tandis que Chrome et Opera présentent des variations plus faibles).

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

Le "word joiner" peut être utilisé dans les situations où l'utilisation des balises HTML est limitée, par exemple dans les formulaires des sites Web et des forums.
Sur le spectre de la présentation et du contenu La majorité d'entre eux considèrent que le groupeur de mots est plus proche du contenu que les balises.

- Testé sous Windows 8.1 Core 64 bits :
    - IE 11.0.9600.18205
    - Firefox 43.0.4
    - Chrome 48.0.2564.109 (Official Build) m (32 bits)
    - Opera 35.0.2066.92

Répondu el 8 de Mars, 2016 par Pacerier (15960 Points )

0 votes

Il semble que "U+FEFF Zero Width No-break Space" ne fonctionne pas correctement dans IE11.

Commenté el 20 de Avril, 2016 par Ivan Gusev

0 votes

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

Commenté el 20 de Avril, 2016 par Ivan Gusev

0 votes

Malgré la presse négative constante 

Commenté el 23 de Juillet, 2017 par JamesWilson

Answer 6

4voto

Toby T Points 31

Suite à la solution JSX utile de @den, ceci a fonctionné pour moi :

<h2>{props.name.replace('-', '-\u2060')}</h2>

Répondu el 29 de Octobre, 2021 par Toby T (31 Points )

1 votes

Aussi replace('-', '\u2011') qui est égal au trait d'union insécable ou à &#8209 (mentionné dans la réponse acceptée) est une bonne option.

Commenté el 29 de Novembre, 2021 par Shahriar

0 votes

Bonne réponse. J'ajouterais simplement RegExp pour remplacer tous les traits d'union dans le texte au lieu du premier : .replace(/-/gm, '-\u2060');

Commenté el 2 de Décembre, 2021 par Vincente

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: