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

강제 줄바꿈이나 텍스트가 들어가는 영역을 정확하게 짚어줄 때 필요한 css 정리!

맨날 뭐가 뭔지 헷갈려서 무한구글링을 덜 하기위한 , , ,,,ㅋㅋㅋ

 

 

 

 

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 계열 / 아시아 언어만 지원 (한글, 중국어, 일본어)

 

파폭 3.5 이상에서는 지원합니당.

 

 

 

 

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을 줘서 블록 속성을 지정해줘야 합니다.

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

 

예시

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

 

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