Impedire che le parole lunghe escano da Div senza usare la parola d'ordine CSS

Question

Ho un div e tutte le parole lunghe (senza spazi) scorrono all'esterno del div.

Si prega di non contrassegnare la domanda come duplicata di How to prevent long text from flowing out of a container o Long words are flowing out of the box - How to prevent?, dove il problema è risolto utilizzando word-wrap: break-word;.

Lo svantaggio di word-wrap: break-word; è che interrompe anche le parole corte che si trovano sul bordo del div, in un modo che interrompe il flusso del testo. Voglio che le parole brevi rimangano come sono e rompono solo le parole lunghe. È possibile implementarlo? Come gestiscono altri siti web?

Answer 1

si rompe anche brevi parole che sono ai margini del div

Non è vero ... word-wrap: break-word; non dovrebbero farlo.
Forse stai confondendo questo con la proprietà word-break: break-all; (che non funziona in tutti i browser).

Vai a questa jsfiddle per un confronto: http://jsfiddle.net/Snu8B/3/

per Firefox si potrebbe provare la proprietà hyphens.

Answer 2

Se siete disposti a "nascondere" le parole si può giocare con overflow: hidden

.mydiv { 
    height : youchoose; 
    width : youchoose; 
    overflow: hidden; 
} 

Altrimenti:

word-wrap : normal|break-word; 
normal : Break words only at allowed break points 
break-word: Allows unbreakable words to be broken 

word-break: normal|break-all|hyphenate; 
normal : Breaks non-CJK scripts according to their own rules 
break-all : Lines may break between any two characters for non-CJK scripts 
hyphenate : Words may be broken at an appropriate hyphenation point