while-space, workd-break, word-wrap, text-overflow

white-space

공백 문자는 어떻게 다룰 것인지 지정하는 코드. (HTML 코드 상에서 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등)

white-space : normal;

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

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

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

white-space : inherit; - 부모 요소의 값을 상속

-------------------------------------------------------------------------------------------

word-break

텍스트가 들어가는 블록 요소의 가로 사이즈에 맞춰 줄바꿈 해줄까. 말까 하는 코드

강제 줄바꿈 방지. 텍스트 길이 제한.

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

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

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

word-break : nowrap; -> 줄바꿈하기 싫을 때

word-break : keep-all; -> 한글일 경우 띄어쓰기 기준으로 짤림.

-------------------------------------------------------------------------------------------

word-wrap

텍스트가 들어가는 블록 요소의 사이즈에 따라 줄바꿈 해주는 코드.

word-wrap : break-word;

가로 사이즈나 엘러먼트에 맞춰서 강제 줄 바꿈 해준다.

word-break : break-all; 과 같은 결과물

-------------------------------------------------------------------------------------------

Text-overflow

긴 문자열을 잘라주는 형태를 지정

text-overflow : clip;

엘리먼트의 테두리에 맞춰서 글자를 자른다.

text-overflow : ellipsis;

잘라지는 끝 부분에 자동으로 '...'을 넣어준다. (ie6이상에서만 지원가능. 파폭은 안됨.)

* width 값이 지정되어야함. / 높이를 정해주거나 white-space : nowrap; 속성을 사용해야함.

* span이나 a태그에 사용할 때는 display : inline-block을 줘서 블록 속성을 지정해줘야합니다.

  -> 일반 인라인 속성이라면 아무리 가로 사이즈를 지정해줘도 못 알아먹습니다.

ex) display : inline-block; text-overflow : ellipsis;

overflow : hidden; white-space : nowrap;

 

* div나 selection 같은 기본 블록 요소들은 display 지정을 안해도 됩니다.