Come si fanno a racchiudere le parole lunghe su newline ed evitare lo scroll orizzontale usando i CSS?

Question

Ho la html folowing:

<div class="box"> 
    long text here 
</div> 

e css:

.box { 
    width: 400px; 
    height: 100px; 
    overflow: auto; 
    border: 1px gold solid; 
} 

Voglio solo di scorrimento verticale. Ma quando una parola è troppo lunga, viene visualizzata una pergamena orizzontale. Come faccio a completare le parole lunghe?

Se necessario, posso utilizzare un trucco con jQuery o PHP, ma mi piacerebbe risolverlo usando CSS, perché è un lavoro CSS.

che sai suonare qui: http://jsfiddle.net/879bc/1/

Answer 1

word-wrap: break-word 

https://developer.mozilla.org/en/CSS/word-wrap

Answer 2

La soluzione che ho usato in passato è una libreria di puntini di sospensione come http://dotdotdot.frebsite.nl/ per jQuery, è possibile specificare il numero di caratteri e lo hanno dot dot dot dopo che così è adatta a tutti su una riga.

Answer 3

Per l'interruzione di parole personalizzata, esiste un carattere speciale HTML che non viene utilizzato molto spesso- ­ (trattino morbido) - che divide le parole su 2 righe e inserisce un trattino dopo la prima parte della parola se la parola si avvicina il bordo del suo contenitore. Il problema è che dovrai metterli ovunque tu li voglia. Come dici tu, però, puoi anche impostare una funzione js o php e inserirli nelle posizioni appropriate.