word-wrap & word-break (줄 바꿈)

선택자 {속성:값;}

/* 적용 : ie6,7,8, sf4 */
/* 예외 : op9, ff3 */
속성 : word-wrap
값 : normal(default) | break-word

/* ie 전용 */
속성 : word-break
값 : keep-all(default) | break-all

The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word.

In the first paragraph below, normal is used. This is the same as if the property wasn’t used, i.e. the long word breaks out of the box as there isn’t enough width for it to be fully contained in the box. In the second paragraph, break-word is used and the long word is broken into two pieces, so that the second part wraps onto the next line.

This is currently supported in IE, Safari, and Firefox 3.1 (Alpha).

view plaincopy to clipboardprint?

1. <div style="width:200px; margin:15px 0; padding:5px; border:1px solid #000; word-wrap:normal; font:12px/1.5 dotum;">   
2.  This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit   
3. </div>   
4. <div style="width:200px; margin:15px 0; padding:5px; border:1px solid #000; word-wrap:break-word; font:12px/1.5 dotum;">   
5.  This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit   
6. </div>  

<div style="width:200px; margin:15px 0; padding:5px; border:1px solid #000; word-wrap:normal; font:12px/1.5 dotum;">  This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit </div> <div style="width:200px; margin:15px 0; padding:5px; border:1px solid #000; word-wrap:break-word; font:12px/1.5 dotum;">  This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit </div>

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit

This paragraph has long words thisisaveryverylongwordthatisntreallyoneword and again a longwordwithnospacesinit