Impedir quebra de linha do elemento de extensão

242

Eu tenho um <span>elemento que eu quero exibir sem nenhuma quebra de linha. Como eu posso fazer isso?

html css Randomblue
fonte
se você estiver olhando para suprimi-los, veja stackoverflow.com/questions/425274/...
amwinter

Respostas:

407

Coloque isso no seu CSS:

white-space:nowrap;

Obtenha mais informações aqui: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

A white-spacepropriedade declara como o espaço em branco dentro do elemento é tratado.

Valores

normal Esse valor instrui os agentes do usuário a recolher seqüências de espaços em branco e interromper linhas conforme necessário para preencher caixas de linhas.

pre Este valor evita que os agentes do usuário colapsem sequências de espaço em branco. As linhas são quebradas apenas nas novas linhas na origem ou nas ocorrências de "\ A" no conteúdo gerado.

nowrap Esse valor recolhe o espaço em branco como 'normal', mas suprime as quebras de linha no texto.

pre-wrap Este valor evita que os agentes do usuário colapsem sequências de espaço em branco. As linhas são quebradas nas novas linhas na origem, nas ocorrências de "\ A" no conteúdo gerado e conforme necessário para preencher as caixas de linha.

pre-line Este valor direciona os agentes do usuário a recolher sequências de espaço em branco. As linhas são quebradas nas novas linhas na origem, nas ocorrências de "\ A" no conteúdo gerado e conforme necessário para preencher as caixas de linha.

inherit Adota o mesmo valor especificado que a propriedade para o pai do elemento.

Daan
fonte
3
Também agradável para adicionar mais alguma documentação aqui: w3.org/wiki/CSS/Properties/white-space
Justus Romijn
21
No caso de você ter muitos spans dentro de div e desejar obter um span de linha única, mas não um div de linha única, você deve adicionar ao span também exibir: inline-block ;. Espero que ajude alguém.
walv
16

Se você precisar apenas impedir quebras de linha em caracteres de espaço, poderá usar &nbsp;entidades entre as palavras:

No&nbsp;line&nbsp;break

ao invés de

<span style="white-space:nowrap">No line break</span>
Brent Washburne
fonte
0

white-space: nowrapé a solução correta, mas impedirá qualquer quebra de linha. Se você deseja apenas impedir quebras de linha entre dois elementos, fica um pouco mais complicado:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Para impedir quebras entre os vãos, mas para permitir quebras entre "Alguns" e "texto", você pode:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Isso é bom o suficiente para o Firefox. No Chrome, você também precisa substituir o espaço em branco entre as extensões por um &nbsp;. (Remover o espaço em branco não funciona.)

infeliz
fonte