¿Cómo envuelve palabras largas en nueva línea y evita el desplazamiento horizontal con CSS?

Question

que tienen el html folowing:

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

y CSS:

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

quiero solamente un desplazamiento vertical. Pero cuando una palabra es demasiado larga, se visualiza un desplazamiento horizontal. ¿Cómo preparo las palabras largas?

Si es necesario, puedo usar un truco con jQuery o PHP, pero me gustaría resolverlo usando CSS, porque es un trabajo de CSS.

Puede FIDDLE aquí: http://jsfiddle.net/879bc/1/

Answer 1

word-wrap: break-word 

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

Answer 2

La solución que he usado en el pasado es una biblioteca de puntos suspensivos como http://dotdotdot.frebsite.nl/ para jQuery, puede especificar el número de caracteres y lo han dot dot dot después de eso por lo que todo encaja en una linea

Answer 3

Para la división de palabras personalizadas, hay un carácter especial html que no se usa con frecuencia: ­ (guión suave) - que dividirá palabras en 2 líneas e insertará un guión después de la primera parte de la palabra si la palabra se acerca el borde de su contenedor. El problema es que tendrás que ubicarlos donde quieras. Como dices, sin embargo, también puedes configurar una función js o php e insertarlas en los lugares apropiados.