[text] CSS - overflow-wrap 속성 - 줄바꿈 위해 단어 쪼개기 (= overflow-wrap속성 = 오버플로랩 속성) ※ 단어깨기, 문자열깨기

목차

1. overflow-wrap 예제 - 줄바꿈 위해 긴 단어 깨기
2. overflow-wrap 정의
3. 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

부모 요소의 속성값 상속