Evite el salto de línea entre elementos html

Tengo este <td>elemento:

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

Esperaba mantener esto en una sola línea, pero esto es lo que obtengo:

Como puede ver, la bandera y el número de teléfono están en líneas separadas. El  trabajan en entre los números del número de teléfono, pero no entre la bandera y número de teléfono.

¿Cómo puedo asegurarme de que el renderizador no introduzca ningún salto de línea?

Hay varias formas de evitar saltos de línea en el contenido. El uso  es unidireccional y funciona bien entre palabras, pero usarlo entre un elemento vacío y algún texto no tiene un efecto bien definido. Lo mismo se aplicaría al enfoque más lógico y más accesible en el que utiliza una imagen como icono.

La alternativa más sólida es usar el nobrmarcado, que no es estándar pero es compatible universalmente y funciona incluso cuando CSS está deshabilitado:

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

(Puede, pero no es necesario, usar en  lugar de espacios en este caso).

Otra forma es el nowrapatributo (en desuso / obsoleto, pero aún funciona bien, excepto por algunas peculiaridades raras):

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

Luego está la forma CSS, que funciona en navegadores habilitados para CSS y necesita un poco más de código:

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

CSS para ese td: white-space: nowrap;debería resolverlo.

Si necesita esto para varias palabras o elementos, pero no puede aplicarlo a un TD completo o similar, se puede usar la etiqueta Span.

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

Si usa la versión de la clase, recuerde configurar el CSS como se detalla en la respuesta aceptada.

Si la <i>etiqueta no se muestra como un bloque y causa el problema, esto debería funcionar:

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

En algunos casos (por ejemplo, html generado e insertado por JavaScript), es posible que también desee intentar insertar un ensamblador de ancho cero:

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

Esta es la verdadera solución:

<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 */
}

Ejemplo, imágenes que siempre antes del texto:

nobr es demasiado poco confiable, use tablas

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

Todo va en la misma línea, todo está nivelado entre sí, y tienes mucha más libertad si quieres cambiar algo más tarde.