Zapobieganie długim słowom wypływającym z DIV bez użycia słowa kluczowego CSS

Question

Mam div i wszystkie długie słowa (bez spacji) wypływające poza div.

Proszę nie oznaczać pytania jako duplikatu How to prevent long text from flowing out of a container lub Long words are flowing out of the box - How to prevent?, gdzie problem został rozwiązany za pomocą word-wrap: break-word;.

Wadą word-wrap: break-word; jest to, że łamie również krótkie słowa, które znajdują się na brzegu div, w sposób zakłócający przepływ tekstu. Chcę, aby krótkie słowa pozostały takie, jakimi są i łamią tylko długie słowa. Czy można to zrealizować? Jak radzą sobie z tym inne strony internetowe?

Answer 1

też łamie krótkie słowa, które są na skraju div

to nieprawda ... word-wrap: break-word; nie powinien tego robić.
Być może mylisz to z właściwością word-break: break-all; (która nie działa we wszystkich przeglądarkach).

Zobacz ten jsfiddle dla porównania: http://jsfiddle.net/Snu8B/3/

do Firefoksa można spróbować właściwość hyphens.

Answer 2

Jeśli są chętni do "hide" dodaje się wyrazy można grać z overflow: hidden

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

Inaczej:

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