Estamos dando un repaso a las novedades que trae CSS 3 y en este caso vamos a ver una propiedad interesante que servirá para que ciertas palabras que son demasiado largas y no caben en la anchura de una caja.
Para evitar este efecto, en CSS 3 se ha incluido un atributo llamado word-wrap que sirve para especificar que las palabras que sean demasiado largas se deben cortar, de manera que quepan en el ancho disponible de la caja. Una propiedad muy útil que seguro que pronto se comenzará a utilizarse habitualmente.
Hemos de agradecer a Microsoft la incorporación de esta nueva propiedad de CSS 3, ya que el atributo word-wrap comenzó siendo una etiqueta no estándar de CSS, que estaba disponible en Internet Explorer y debido a su utilidad, el W3C se decidió a incorporarla a la nueva especificación de este lenguaje de estilo.
Normal:
Hace que las palabras no se corten, lo que sería el comportamiento normal que conocíamos hasta ahora, ocurriendo que las palabras largas nos puedan descuadrar nuestro diseño.
Ahora veamos una muestra de una caja en forma normal:
break-word
Con este otro valor de word-wrap: break-word, lo que conseguimos es que la palabra se recorte, para caber en el ancho que habíamos definido.
Ahora veamos una muestra de una caja en forma break-word:
CSS
HTML
Eso es todo...
Para evitar este efecto, en CSS 3 se ha incluido un atributo llamado word-wrap que sirve para especificar que las palabras que sean demasiado largas se deben cortar, de manera que quepan en el ancho disponible de la caja. Una propiedad muy útil que seguro que pronto se comenzará a utilizarse habitualmente.
Hemos de agradecer a Microsoft la incorporación de esta nueva propiedad de CSS 3, ya que el atributo word-wrap comenzó siendo una etiqueta no estándar de CSS, que estaba disponible en Internet Explorer y debido a su utilidad, el W3C se decidió a incorporarla a la nueva especificación de este lenguaje de estilo.
Manos a la obra
El atributo word-wrap tiene dos posibles valores: normal o break-word.Normal:
[word-wrap: normal;]
Hace que las palabras no se corten, lo que sería el comportamiento normal que conocíamos hasta ahora, ocurriendo que las palabras largas nos puedan descuadrar nuestro diseño.
Ahora veamos una muestra de una caja en forma normal:
Texto con word - Texto, texto, texto, Textooooooooooooooooooooooooooooooooooooooooooooooooooooo Otro texto más
[word-wrap: break-word;]
Con este otro valor de word-wrap: break-word, lo que conseguimos es que la palabra se recorte, para caber en el ancho que habíamos definido.
Ahora veamos una muestra de una caja en forma break-word:
Texto con word - Texto, texto, texto, Textooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo Otro texto más
Para que no te des mala vida
El código que utilice fue el siguiente (Adaptando el atributo):CSS
[.contenedor{ width:300px; border-radius:5px; border:2px solid #390; color:#333333; background-color:#47b013; font-family:Arial, Helvetica, sans-serif; padding:10px; margin-bottom:20px; } .texto{ word-wrap: break-word; } ]
HTML
[<div class="contenedor"> <p class="texto">aquí el texto...<p> </div>]
Eso es todo...
