Como arreglar el texto se sale del DIV con CSS

Si les ha pasado alguna vez, que al poner una palabra demasiada larga en un div de tamaño fijo el texto se sobre sale, pues aqui les traigo la solucion para cortar el texto que se sale del DIV con CSS.

Se trata de usar la propiedad de CSS:

word-wrap: break-word;




Un ejemplo del problema :

Esto es una palabra muy largaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Que tiene el siguiente estilo :

border: 1px solid;
padding: 10px;
width: 100px;

Si le añadimos "word-wrap: break-word;" al estilo, se soluciona el problema:

border: 1px solid;
padding: 10px;
width: 100px;
word-wrap: break-word;

Esto es una palabra muy largaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Espero que les haya servido.

Comentarios

  1. muchas gracias por la fin! me tenia trabado este problema :D

    ResponderEliminar
  2. excelente la soluciion, me sirvio muchisiimo!

    ResponderEliminar
  3. Que bueno!! me ha servido esta solución! Gracias. Saludos

    ResponderEliminar
  4. sencillamente genial, Muchas gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ;-)

    ResponderEliminar
  5. Muchísimas gracias. Llevo como tres días búscando la solución y era así de simple. Deberían darte una medalla por publicar artículos de está gama.
    Sencillamente, gracias.

    ResponderEliminar
  6. Gracias! Sencillo y eficaz. Te lo agradezco!

    ResponderEliminar
  7. Mi pagina creo que tiene ese problema y ahce tiempo vengo buscando la respuesta, todo pasa cuando agrando o achico la pagina que el texto, foto y demas se salen para afuera de la pagina y queda horrible. Yo no sé nada de dreamweaver lo hice a pulmon. Se podría fijar en mi pagina para ver si se puede solucionar? Le estaría muy agradecido hace tiempo que quiero solucionarlo (mi web ha quedado en el adjunto)

    ResponderEliminar
  8. Excelente Me sirve para una tarea y para una futura pagina que hare, muchas gracias man xD

    ResponderEliminar
  9. Muchas gracias........ pero en Google Chrome no funciona que debo hacer para que me funcione en Chrome.
    Gracias

    ResponderEliminar
  10. Excelente.. Gracias...!!!

    ResponderEliminar
  11. Ahh por fin pude encontrar la solucion mas rapida gracias

    ResponderEliminar
  12. muchas gracias.... que sencillo era!!! de verdad MIL GRACIAS

    www.follanuncios.com

    ResponderEliminar
  13. eres un capo exelente

    ResponderEliminar
  14. Gracias, enserio, muchas gracias, solucion bastante simple :)

    ResponderEliminar
  15. Muchisimas grasias brother he estado buscando esto hace mucho tiempo.

    ResponderEliminar
  16. Fantástica solución. He visto de todo para este problema y tu solución es, sin duda, la mejor. No conocía esta propiedad. Muchas gracias.

    ResponderEliminar
  17. Muchas gracias, hace tiempo que buscaba esta solución.

    ResponderEliminar
  18. No me resuelve el problema, a mi se me sale el texto del recuadro

    ResponderEliminar
  19. Excelente, gracias.

    Pude arreglar este problema en mi web: https://gurus.vip/

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog