목차
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-word"
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
부모 요소의 속성값 상속
