La proprietà word-wrap CSS

Quando si progettano delle pagine web nelle quali si sono inseriti dei box (tag div), può succedere che all'interno di esso ci sia una parola troppo lunga rispetto alla larghezza del box impostata e quindi esce fuori.

Come in questo caso:

Codice CSS

 #box
{ 
background-color:#CCCCCC; 
padding: 10px; 
width: 300px; 
border: 1px solid #000000; 
}

e questo è il risultato:

Aggiungendo la proprietà word-wrap al box:

Codice CSS

 #box
{ 
background-color:#CCCCCC; 
padding: 10px; 
width: 300px; 
border: 1px solid #000000; 
word-wrap: break-word; 
}

si ottiene questo risultato: