Evitar el desborde de texto con CSS3 (Atributo Word-wrap)

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.

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

break-word
[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...

¿Qué te pareció?

Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: Evitar el desborde de texto con CSS3 (Atributo Word-wrap)
Evitar el desborde de texto con CSS3 (Atributo Word-wrap)
OnSoni
http://www.onsoni.com/2012/04/evitar-el-desborde-de-texto-con-css3.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2012/04/evitar-el-desborde-de-texto-con-css3.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy