word-break 줄바꿈 속성(break-all, keep-all)

 

 

word-break 줄바꿈 속성(break-all, keep-all)

 

어제는 word-wrap 속성을 알아 보았는데요

 

[css] - word-wrap 줄바꿈 속성(normal, break-word)

 

 

오늘도 위 속성과 비슷한 줄바꿈 속성 word-break 입니다. 

 

 

▶word-break는 글이 길어질 때 줄바꿈을 어떻게 할지 지정하는 속성입니다.

 

 

word-wrap은 비아시아 언어의 줄바꿈을 제어한다면

 

word-break는 아시아, 비아시아 언어의 줄바꿈을 모두 제어할 수 있습니다.

 

 

 

▶word-break 속성값

 

normal: 기본값으로, 일반적인 규칙에 따라 줄바꿈 함

break-all: 문자를 강제로 줄바꿈 할 수 있음.

              아시아 언어(CJK)에서 사용할 때는 normal처럼 행동하며

              * CJK는 Chinese, Japanese, Korean 약자

              

              비 아시아 언어에 사용할 때는 임의대로 줄바꿈 할 수 있음.

                  

              bea

              utiful 처럼(hyphen 속성과 자주 사용됨)

 

 

keep-all: 문자 쌍 사이에서 줄바꿈이 금지
              비 아시아 언어에 사용될 때는 normal처럼 행동함.

 

 

*테스트를 해 보면 keep-all을 우리말에 적용했을 때, 한 단어도 끊어짐이 있습니다.

 

아

름다움 처럼요

 

*요소에 width나 height를 지정해야 이 속성값들이 적용됩니다.

 

 

 

 

▶word-break 브라우저 지원 정보

 

IE6, IE7+, Chrome, Safari 3.1.2 지원.

 

FF3, Opera 9.52 작동하지 않음.

 

 

 

 

▶html/css 작성 예입니다.

 

html

<div> Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div>   <div id="two"> Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div> <div id="three"> Once when I was six years old I saw a magnificent picture in a book, called True Stories from Nature, about the primeval forest. </div>

  

 

css

div { background: #FFE08C; width: 200px; margin: 20px; }   #two { word-break: break-all; } #three { word-break: keep-all; }

 

 

▶실행화면

word-break.htm

 

 

 

 

 

 

우리말 같은 경우 3가지가 차이가 없는 반면,

 

영어는 break-all는 한 단어도 중간에 끊어지며, keep-all은 기본값처럼 행동합니다.

 

 

 

 

▶word-break: break-all과 word-wrap: break-word 차이는?

 

 

word-wrap: break-word  비아시아 언어를 제어

                                         의미없는 긴 문자열은 중간에 자르는 반면

                                         한 단어처럼 의미 있는 문자는 중간에 자르지 않습니다.

 

                                     

 

word-break: break-all  아시아 언어의 경우  normal처럼 행동하며

                                      비아시아 언어의 경우 한 단어도 중간에 자름

                                      

 

 word-break2.htm

 

 

 

 

 

 

「함께 읽어보면 좋은 글」

 

word-wrap 줄바꿈 속성(normal, break-word)

 

white-space 속성(pre, pre-wrap, pre-line 차이)

 

[htm/css] word-spacing 속성(단어 간격)

 

[html/css] 글자 간격 지정 속성 letter-spacing