Prevenir el salto de línea del elemento span

Respuestas:

408

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.

Daan
fuente
3
También es bueno agregar más documentación aquí: w3.org/wiki/CSS/Properties/white-space
Justus Romijn
21
En el caso de que tenga muchos tramos dentro de div y desee lograr un intervalo de una sola línea pero no un div de línea única, debe agregar al intervalo también mostrar: bloque en línea ;. Espero que ayude para alguien.
walv
16

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>
Brent Washburne
fuente
1

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 &nbsp;. (Eliminar el espacio en blanco no funciona).

Wortwart
fuente