Impedir quebra de linha do elemento de extensão

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

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.

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

No line break

ao invés de

<span style="white-space:nowrap">No line break</span>

Com o Bootstrap 4 Class:

text-nowrap

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

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  . (Remover o espaço em branco não funciona.)