Prevenir el salto de línea del elemento span

Tengo un <span>elemento que quiero mostrar sin ningún salto de línea. ¿Cómo puedo hacer eso?

Pon esto en tu CSS:

white-space:nowrap;

Obtenga más información aquí: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

La white-spacepropiedad declara cómo se maneja el espacio en blanco dentro del elemento.

Valores

normal Este valor dirige a los agentes del usuario a colapsar secuencias de espacios en blanco y romper líneas según sea necesario para llenar cuadros de líneas.

pre Este valor evita que los agentes del usuario colapsen secuencias de espacio en blanco. Las líneas solo se rompen en las nuevas líneas en la fuente, o en las apariciones de "\ A" en el contenido generado.

nowrap Este valor contrae el espacio en blanco como 'normal', pero suprime los saltos de línea dentro del texto.

pre-wrap Este valor evita que los agentes del usuario colapsen secuencias de espacio en blanco. Las líneas se rompen en las nuevas líneas en la fuente, en las apariciones de "\ A" en el contenido generado, y según sea necesario para llenar los cuadros de línea.

pre-line Este valor dirige a los agentes de usuario a colapsar secuencias de espacio en blanco. Las líneas se rompen en las nuevas líneas en la fuente, en las apariciones de "\ A" en el contenido generado, y según sea necesario para llenar los cuadros de línea.

inherit Toma el mismo valor especificado que la propiedad para el elemento primario.

Si solo necesita evitar saltos de línea en caracteres de espacio, puede usar  entidades entre palabras:

No line break

en vez de

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

white-space: nowrapes la solución correcta pero evitará cualquier ruptura en una línea. Si solo desea evitar saltos de línea entre dos elementos, se vuelve un poco más complicado:

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

Para evitar interrupciones entre los tramos pero para permitir interrupciones entre "Algunos" y "texto" se puede hacer:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Eso es lo suficientemente bueno para Firefox. En Chrome, también debe reemplazar el espacio en blanco entre los tramos con un  . (Eliminar el espacio en blanco no funciona).

Con Bootstrap 4 Class:

text-nowrap

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