Предотвращение длинных слов из потока Div без использования слова CSS

Question

У меня есть div и все длинные слова (без пробелов), выходящие за пределы div.

Пожалуйста, не указывайте вопрос как дубликат How to prevent long text from flowing out of a container или Long words are flowing out of the box - How to prevent?, где проблема решена с помощью word-wrap: break-word;.

Недостаток word-wrap: break-word; заключается в том, что он также разбивает короткие слова, которые находятся на краю div, таким образом, который нарушает поток текста. Я хочу, чтобы короткие слова оставались такими, какими они есть, и только сломать длинные слова. Можно ли это реализовать? Как другие сайты справляются с этим?

Answer 1

также ломает короткие слова, которые находятся на краю DIV

Это не правда ... word-wrap: break-word; не должны делать это.
Возможно, вы сбиваете с толку это свойство word-break: break-all; (которое не работает во всех браузерах).

Смотрите эту jsfiddle для сравнения: http://jsfiddle.net/Snu8B/3/

Для светлячок можно попробовать hyphens собственность.

Answer 2

Если вы готовы «скрывать» слова, которые вы можете играть с переполнением: скрытые

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

В противном случае:

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