white-space / text-overflow

white-space

- 공백을 어떻게 처리할지 설정

- line break(줄바꿈) , tab(들여쓰기), space(띄어쓰기) 로 인해 공백이 만들어짐

- HTML에서는 1개 이상의 연속된 띄어쓰기는 1개의 띄어쓰기로 표시된다. (그 이상은   를 사용해야함)

속성값	line break	tab/space	자동 줄바꿈
normal(기본값)	무시	1번	O
nowrap	무시	1번	X
pre	반영	그대로	X
pre-wrap	반영	그대로	O
pre-line	반영	1번	O

EX 1 normal

EX 2 nowrap

EX 3 pre

EX 4 pre-wrap

EX 5 pre-line

text-overflow

- 요소에서 자동줄바꿈 되지 않은 텍스트(영역을 벗어난 텍스트)를 어떻게 처리할지 설정

- overflow 값이 visible이 아닐때, white-space 가 자동 줄바꿈 되지 않는 속성(nowrap, pre)일때만 동작함

- clip : 영역을 벗어난 텍스트를 잘라냄

- ellipsis : 영역을 벗어난 텍스트를 표시하지 않고 말줄임표(...)로 표시

- string : 영역을 벗어난 텍스트를 표시하지 않고 string으로 대체함 (firefox에서만 가능)

EX 6