[ CSS ] white-Space, word-break, word-wrap, text-overflow

■ white-Space
공백문자를 어떻게 할 것인지 설정.
( 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등 )

white-space : normal;
기본값. 연속 공백과 줄바꿈 등을 통합해서 표현
( 보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인것처럼 적용됨 )

white-space : pre;
normal 과 반대. 원문 그대로 출력

white-space : nowrap;
스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 ( normal 의 효과 )
줄바꿈은 인정함 ( pre 의 효과 )


■ word-break
텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 설정.
강제줄바꿈 방지, 텍스트 길이제한

word-break : normal;
기본값. 단어 단위로 끊어서 줄바꿈

word-break : break-all;
특수문자를 제외하고 강제로 줄바꿈

word-break : break-word;
특수문자를 포함하고 강제 줄바꿈

word-break : nowrap;
줄바꿈 하지 않음

word-break : keep-all;
한글일 경우 띄어쓰기 기준으로 짤림
ie 계열 / 아시아 언어만 지원 ( 한글, 중국어, 일본어 )

파폭 3.5 이상에서는 지원


■ text-overflow
긴 문자열을 잘라주는 형태를 지정

text-overflow : clip;
엘리먼트의 테두리에 맞춰서 글자를 자른다.

text-overflow : ellipsis;
잘라지는 끝부분에 자동으로 `...` 을 넣어준다.
ie6 이상에만 지원 가능, 파폭은 안됨
width 값이 지정되어야 함 / 높이를 정해주거나 white-space-nowrap; 속성 사용해야 함. / <nobr> 사용

div 에 글을 써 넣으면 `\n` 이 먹히지 않는다. 그리고 같은 글자가 반복되어서 나오면 ( "++++++++++..." 같은것 )
div 영역을 뚫고 나가버린다. 이를 해결하기 위해서 CSS 의 white-space 와 word-break 를 써야한다.

white-space
줄바꿈 해주는 property 로 normal, nowrap, pre, pre-line, pre-wrap 이 있다.

normal 은 보통의 경우로 옵션을 주지 않아도 된다.
normal 은 줄바꿈을 하지 않는다. ( div 를 뚫고 나간다. )
pre 는 html 의 <pre> 테그처럼 내부의 태그를 실행시켜주지만 이역시 줄바꿈은 하지 않는다.
pre-line 은 normal + pre. 줄바꿈도 해주고 태그도 실행한다.
pre-wrap 는 pre-line 과 비슷하지만 pre-line 은 연속공간 ( "     " ) 을 한칸으로 압축하지만 pre-wrap 는 압축하지 않고 그대로 보여준다.

word-break
한단어가 길게 이어질때 자동으로 잘라주는 property 이다.

normal 은 자르지 않는다.
break-all 은 영역을 넘어가면 무조건 자른다.
hyphenate 는 영역을 넘어가더라도 단어를 유지해준다.
keep-all 은 한글일 경우 띄어쓰기 기준으로 자른다. (only IE)
현재 word-break 는 5대 브라우저 중 FF 와 Opera 만 지원하지 않는다.

word-wrap
normal 은 자르지 않는다.
break-word 는 단어 단위로 자른다.

(CSS3 를 지원하는) 모든 브라우저에서 단어별로 줄바꿈하고 반복되는 단어를 자르려면 (한글 제외)
white-space : pre-wrap;
word-wrap : break-word;
옵션을 추가하면 된다.