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

J'ai cet <td>élément:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

J'espérais garder cela en une seule ligne, mais voici ce que j'obtiens:

Comme vous pouvez le voir, l'indicateur et le numéro de téléphone sont sur des lignes séparées. le  travaillent entre les numéros 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?

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

L'alternative la plus robuste consiste à utiliser le nobrbalisage, qui n'est pas standard mais universellement pris en charge et fonctionne même lorsque CSS est désactivé:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(Vous pouvez, mais vous ne devez pas, utiliser à la  place des espaces dans ce cas.)

Une autre façon est l' nowrapattribut (obsolète / obsolète, mais fonctionne toujours bien, à l'exception de quelques bizarreries rares):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

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

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

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

Si la <i>balise n'est pas affichée en tant que bloc et provoque le problème, cela devrait fonctionner:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

Dans certains cas (par exemple html généré et inséré par JavaScript), vous pouvez é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;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

Voici la vraie solution:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

css:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

Exemple, des images toujours avant le texte:

nobr est trop peu fiable, utilisez des tableaux

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

Tout va sur la même ligne, tout est au même niveau, et vous avez beaucoup plus de liberté si vous voulez changer quelque chose plus tard.