Long words are flowing out of the box - How to prevent?

问题

I have a styled div where I need to add a long text. I have a maximum width ( 100px ) and I need to "make text go down". Now I can't find a solution for my problem: in case of long text, it goes out of the box. I don't have a height problem so it should take any size required.

This is my code:

<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>

回答1:

word-wrap: break-word; should help.

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

来源：https://stackoverflow.com/questions/8261738/long-words-are-flowing-out-of-the-box-how-to-prevent