목차
- overflow-wrap 예제 - 줄바꿈 위해 긴 단어 깨기
- overflow-wrap 정의
- overflow-wrap 구문
overflow-wrap 예제 - 줄바꿈 위해 긴 단어 깨기
<style>
div { width: 150px; border: 1px solid #000000;}
div.a {overflow-wrap: normal;}
div.b {overflow-wrap: break-word;}
div.c {overflow-wrap: anywhere;}
</style>
<h2>overflow-wrap: normal (기본값):</h2>
<div class="a">홈짱닷컴 Homzzang.com pneumonoultramicroscopicsilicovolcanoconiosis</div>
<h2>overflow-wrap: break-word:</h2>
<div class="b">홈짱닷컴 Homzzang.com pneumonoultramicroscopicsilicovolcanoconiosis</div>
<h2>overflow-wrap: anywhere:</h2>
<div class="c">홈짱닷컴 Homzzang.com pneumonoultramicroscopicsilicovolcanoconiosis</div>
결과보기
overflow-wrap 정의
인라인 요소의 긴 단어가 넘칠 경우, 줄바꿈 위해서 긴 단어 깨기 여부 지정.
1.
- 기본값: normal
- 상속여부: O
- 애니여부: X
- CSS버전: CSS3
- JS구문: object.style.overflowWrap="break-wordl"
2.
- 인라인요소에만 적용.
- word-break 속성과 달리, overflow-wrap은 전체 단어를 오버플로 없이 한 줄에 배치할 수 없는 경우에만 나누기 함.
- word-wrap 속성이 overflow-wrap 속성으로 이름 바뀜.
4.
주요 최신 브라우저 모두 지원. (단, IE 경우, 부분 지원.)
5.
MDN overflow-wrap 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap 구문
selector {overflow-wrap: normal|anywhere|break-word|initial|inherit;}
[속성값]
normal
단어쪼개기 X (즉, 단어 사이의 공백에서만 줄바꿈) (기본값)
anywhere
단어쪼개기 O (즉, 넘치면 언제든 줄바꿈.)
break-word
단어쪼개기 O (즉, anywhere 결과와 대체로 같으, 다른 경우도 있음.)
initial
이 속성의 기본값으로 지정.
inherit
부모 요소의 속성값 상속