Evite quebra de linha entre os elementos html


110

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:

insira a descrição da imagem aqui

Como você pode ver, a bandeira e o número de telefone estão em linhas separadas. Eles &nbsp;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?

Respostas:


144

Existem várias maneiras de evitar quebras de linha no conteúdo. Usar &nbsp;é 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 &nbsp;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>

16
Re: nobr, mozilla avisa "Este recurso não é padrão e não está no caminho dos padrões. Não o use em sites de produção voltados para a Web: não funcionará para todos os usuários. Também pode haver grandes incompatibilidades entre as implementações e o comportamento pode mudar no futuro. " - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Luke

1
@Luke, esse é um aviso “padrão”. Eles não descrevem nenhuma incompatibilidade (mesmo uma pequena) e não mencionam nenhum navegador que não suporte nobr; Não há nenhum.
Jukka K. Korpela

23
A nobrtag está na mesma categoria de blink: w3.org/TR/html5/obsolete.html#obsolete Ou você trabalha com os padrões da web ou com uma web caótica. A escolha é sua.
Lucas

8
Se você estiver usando bootstrap, uma classe "text-nowrap" já está definida, que define o tipo de acordo.
Ratatwisker

4
@ JukkaK.Korpela, HTML5 agora está finalizado e, sem surpresa, nobrainda está obsoleto e "não deve ser usado" .
Marcus

58

CSS para esse td: white-space: nowrap;deve resolvê-lo.


7

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.


2

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>


2

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>


2

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:

insira a descrição da imagem aqui


-1

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.