word-wrap & word-break (줄 바꿈)
페이지 정보
작성자 서방님 댓글 0건 조회 321회 작성일 10-03-11 19:31본문
/* 적용 : 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).
- <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>
<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>
댓글목록
등록된 댓글이 없습니다.
