Évitez les sauts de ligne entre les éléments HTML

Question

J'ai cet élément :

 +34 666 66 66 66

Je comptais garder tout cela sur une seule ligne, mais voici ce que j'obtiens:

Comme vous pouvez le voir, le drapeau et le numéro de téléphone sont sur des lignes différentes. Les fonctionnent entre les chiffres du numéro de téléphone, mais pas entre le drapeau et le numéro de téléphone.

Comment puis-je m'assurer qu'aucun saut de ligne n'est introduit par le moteur de rendu?

Answer 1

Il existe plusieurs façons d'éviter les sauts de ligne dans le contenu. Utiliser en est une, et fonctionne bien entre les mots, mais l'utiliser entre un élément vide et un texte n'a pas un effet bien défini. Il en irait de même pour l'approche plus logique et plus accessible où vous utilisez une image pour une icône.

L'alternative la plus robuste est d'utiliser la balise nobr, qui n'est pas standard mais universellement prise en charge et fonctionne même lorsque CSS est désactivé :

 +34 666 66 66 66

(Vous pouvez, mais ce n'est pas obligatoire, utiliser à la place des espaces dans ce cas.)

Une autre façon est l'attribut nowrap (déprécié/obsolète, mais fonctionne toujours bien, sauf pour quelques bizarreries rares) :

 +34 666 66 66 66

Ensuite, il y a la méthode CSS, qui fonctionne dans les navigateurs avec CSS activé et nécessite un peu plus de code :

.nobr { white-space: nowrap }

...
 +34 666 66 66 66

Answer 2

CSS pour ce td : white-space: nowrap; devrait résoudre le problème.

Answer 3

Si vous avez besoin de cela pour plusieurs mots ou éléments, mais ne pouvez pas l'appliquer à un TD entier ou similaire, la balise Span peut être utilisée.

Texte à rompre ensemble
    ou 
Texte à rompre ensemble

Si vous utilisez la version class, n'oubliez pas de configurer le CSS comme détaillé dans la réponse acceptée.

Answer 4

Si la balise n'est pas affichée en tant que bloc et cause le problème, alors ceci devrait fonctionner :

+34 666 66 66 66

Answer 5

Dans certains cas (par exemple du HTML généré et inséré par JavaScript), vous voudrez peut-être également essayer d'insérer un jointeur de largeur nulle :

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

Lorem dorem tralalalala DERNIER_MOTS‍ENSEMBLE