Separación de palabras en un párrafo

dolarsrg · #1 (**permalink**) 04/02/2010, 09:51

Hola a todos,

estoy construyendo una nube de etiquetas para una página web, y tengo un problema a la hora de presentarlas. En una nube de etiquetas no interesa que una etiqueta, aunque tenga más de una palabra, se muestre en dos líneas separadas. Es decir, si mi nube fuese:

Azul Rojo Azul
marino Verde
Amarillo

Si os fijáis parece que la etiqueta azul está separada, y lo que pasa es que en el bloque no cabía "Azul Marino" y se ha separado en dos líneas. ¿Existe alguna manera de hacer que las palabras no se rompan por saltos de línea? He probado metiéndolas en <span>azul marino</span> pero me las rompe igualmente. Querría que las "etiquetas" se mantuviese juntas:

Azul Rojo
Azul marino
Verde Amarillo

¿Se os ocurre algo? ¡Gracias!

abimaelrc · #2 (**permalink**) 04/02/2010, 09:56

Bueno en HTML puedes declararlo usando <br /> en css se puede hacer de esta forma, (ahora no sé si se sigue usando este tipo de código)

Código CSS:

Ver originalspan{
  word-break: keep-all;
}

morior · #3 (**permalink**) 04/02/2010, 09:56

Para separar palabras tendrás que recurrir a lenguajes de programación tipo php, yo de tí me pasaría por el foro de php, o sino que muevan el tema.

abimaelrc · #4 (**permalink**) 04/02/2010, 10:05

Cita:

Iniciado por morior

Para separar palabras tendrás que recurrir a lenguajes de programación tipo php, yo de tí me pasaría por el foro de php, o sino que muevan el tema.

En este caso no es necesario usar un lenguaje en el servidor, sino más bien dividir las palabras conforme él las quiere ver.

dolarsrg · #5 (**permalink**) 04/02/2010, 10:06

Hola, muchas gracias a los dos. Sólo por si no me expliqué del todo bien: yo lo que quiero es que no se separe la palabra "Azul marino", quiero que quede así:

Azul Rojo
Azul marino
Verde Amarillo

Muchas gracias por lo del word-break, voy a probar :)

AlbertoGarcia · #6 (**permalink**) 04/02/2010, 11:25

Hola, span es un elemento de linea, prueba a cambiarle el display a block.

Salud!

dolarsrg · #7 (**permalink**) 05/02/2010, 03:39

Genial, muchas gracias!! Con inline-block va bien, el problema es que en Iexplorer no es que funcione con mucha lógica

pero eso ya es un problema menor

jomaruro · #8 (**permalink**) 05/02/2010, 17:35

Hola:

También la puedes poner así:

Azul marino

Saludos.

dolarsrg · #9 (**permalink**) 06/02/2010, 02:08

Cita:

Iniciado por jomaruro

Hola:

También la puedes poner así:

Azul marino

Saludos.

Waa que fácil! y parece que funciona en todos los navegadores! que buena idea. Gracias a ti también.