• Q&A
  • 회원가입
  • 로그인

[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-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

부모 요소의 속성값 상속

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012