white-space, word-break, word-wrap, text-overflow 글자 자르기

white-space 

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

white-space: normal;

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

white-space: pre;

normal과 반대. 원문 그대로 출력

white-space: nowrap;

스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 (normal의 효과)

줄바꿈은 인정함 (pre의 효과)

white-space: inherit;

부모요소의 값을 상속

word-break

텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 해줄까, 말까 하는 코드. (강제줄바꿈 방지, 텍스트 길이제한)

word-break: normal;

기본값. 단어 단위로 끊어서 줄바꿈

word-break: break-all;

특수문자를 제외하고 강제로 줄바꿈 

word-break: break-word;

특수문자를 포함하고 강제 줄바꿈 

word-break: nowrap; 

줄바꿈 하기 싫을 때

word-break: keep-all; 

한글일 경우 띄어쓰기 기준으로 짤림

IE 계열 / 아시아 언어만 지원 (한글, 중국어, 일본어)

word-wrap

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

word-wrap: break-word;

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

word-break:break-all; 과 같은 결과물. 모든 브라우저 적용 가능.

text-overflow

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

text-overflow: clip;

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

text-overflow: ellipsis;

잘라지는 끝부분에 자동으로 '...'을 넣어준다.

IE6 이상에서만 지원 가능, 파폭은 안됨

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

<nobr>은 이제 없어진 태그 이므로 사용하지 않습니다. 

그 대신에 white-space:nowrap; 이 같은 기능을 합니다.

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

일반 인라인 속성이라면 아무리 가로 사이즈를 지정해줘도 안됩니다.

예시)

display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

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