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-3/8”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.
‑est un trait d'union insécable.3-3/8″ou3-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ôt3<span style="font-variant: diagonal-fractions">3/8</style>″"3⅜ ″"Réponses:
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.la source
. Je n'ai jamais pensé qu'il y avait un trait d'union autonome qui ne se briserait pas.Vous pouvez également envelopper le texte pertinent avec
la source
‑) puisse être légèrement plus long qu'un trait d'union normal dans certains navigateurs était pour moi trivial.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.
De plus, j'ai trouvé un scénario spécifique qui a provoqué la rupture d'IE8 / 9 sur un trait d'union.
IE le rend comme ceci.
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.
la source
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.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/nobrVous 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:ou (équivalent décimal):
. Un autre caractère utilisable est "
U+FEFFEspace sans interruption de largeur nulle " [ 1] :et (équivalent décimal):
[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:
est identique au rendu des traits d'union normaux (avec U + 2060 Word Joiner), par exemple:
tandis que les deux rendus ci-dessus diffèrent du rendu de " trait d'union insécable ", par exemple:
. (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
<span class=c1></span>(CSS.c1 {white-space:nowrap;}) et<nobr></nobr>: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
la source
bingo-⁠bongoTard 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:
Cela joindra le symbole aux deux extrémités à ses voisins (sans ajouter d'espace) et empêchera la rupture de ligne.
la source