Las palabras largas fluyen de la caja: ¿cómo prevenir?

Question

Tengo un estilo div donde necesito agregar un texto largo. Tengo un ancho máximo (100px) y necesito "hacer que el texto descienda". Ahora no puedo encontrar una solución para mi problema: en el caso de texto largo, sale de la caja. No tengo un problema de altura, así que debería tomar cualquier tamaño requerido.

Este es mi código:

<style> 
    .infobox { 
     -moz-background-clip: padding;  
     -webkit-background-clip: padding; 
     background-clip: padding-box;  
     border: 6px solid rgba(0,0,0,0.3); 
     -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
     border-radius: 4px; 

     padding: 30px; 
     width: 100px; 
     text-align: center; 

     top: 100px; 
     left: 200px; 
    } 
</style> 

<div class="infobox"> LOOOOOOOOOOOOOOOOOOOOOOOOOOOONG TEXT :)</div> 

Answer 1

word-wrap: break-word; debería ayudar.

• Supported in every browser that matters - caniuse.com
• Read about it on CSS3.info
• jsFiddle Demo - gracias a @Nacereddine