CSS / word-wrap / 긴 단어 처리 방법 정하는 속성
개요
word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정합니다.
- 기본값 : normal
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 3
문법
|
1 |
word-wrap: normal | break-word | initial | inherit |
- normal : break point에서 줄바꿈합니다.
- break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
word-break 속성의 값이 keep-all이면 단어가, break-all이면 글자가 break-point입니다.
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { width: 400px; padding: 10px; background-color: #dddddd; } .a { word-break: keep-all; word-wrap: normal; } .b { word-break: keep-all; word-wrap: break-word; } .c { word-break: break-all; word-wrap: normal; } .d { word-break: break-all; word-wrap: break-word; } </style> </head> <body> <p class="a">loremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolor</p> <p class="b">loremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolor</p> <p class="c">loremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolor</p> <p class="d">loremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolor</p> </body> </html> |
브라우저 지원
- Chrome : 4.0+
- Firefox : 3.5+
- Internet Explorer : 5.5+
- Opera : 10.5+
- Safari : 3.1+