Geek asks and answers

Prevent long words from falling out of a div without using CSS scrapping

I have a div and all long words (without spaces) flow outside the div.

Do not put the question as a duplicate. How to prevent long text from falling out of the container or Long words out of the box - how to prevent? where the problem is solved using word-wrap: break-word;.

The disadvantage word-wrap: break-word;is that it also breaks the short words that are on the edge of the div, in a way that disrupts the flow of text. I want the short words to remain as they are, and only break the long words. Can this be implemented? How do other sites deal with this?

+5
source share
2

, div

... word-wrap: break-word; .
, word-break: break-all; ( ).

. jsfiddle : http://jsfiddle.net/Snu8B/3/

firefox hyphens.

+8

"" , : hidden

.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
0

More articles:


All Articles