Evite quebra de linha entre os elementos html

Eu tenho este <td>elemento:

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

Eu esperava manter isso em uma única linha, mas é o que recebo:

Como você pode ver, a bandeira e o número de telefone estão em linhas separadas. Eles  estão trabalhando entre os números do número de telefone, mas não entre a bandeira e o número de telefone.

Como posso ter certeza de que nenhuma quebra de linha é introduzida pelo renderizador?

Existem várias maneiras de evitar quebras de linha no conteúdo. Usar  é uma maneira e funciona bem entre palavras, mas usá-lo entre um elemento vazio e algum texto não tem um efeito bem definido. O mesmo se aplica à abordagem mais lógica e mais acessível, onde você usa uma imagem para um ícone.

A alternativa mais robusta é usar nobrmarcação, que não é padrão, mas é universalmente compatível e funciona mesmo quando o CSS está desativado:

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

(Você pode, mas não precisa, usar em  vez de espaços neste caso.)

Outra maneira é o nowrapatributo (preterido / obsoleto, mas ainda funciona bem, exceto por algumas peculiaridades raras):

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

Depois, há o método CSS, que funciona em navegadores habilitados para CSS e precisa de um pouco mais 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 esse td: white-space: nowrap;deve resolvê-lo.

Se você precisar disso para várias palavras ou elementos, mas não puder aplicá-lo a um TD inteiro ou semelhante, a tag Span pode ser usada.

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

Se você usar a versão da classe, lembre-se de configurar o CSS conforme detalhado na resposta aceita.

Se a <i>tag não for exibida como um bloco e causando o problema, isso deve funcionar:

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

Em alguns casos (por exemplo, html gerado e inserido por JavaScript), você também pode tentar inserir um joiner de largura zero:

.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 é a solução real:

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

Exemplo, imagens que estão sempre antes do texto:

nobr não é muito confiável, use tabelas

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

Tudo vai na mesma linha, tudo está no mesmo nível e você tem muito mais liberdade se quiser mudar algo mais tarde.