Top

[CSS] white-Space, word-break, word-wrap, text-overflow 내용 정리 | Web-Programing
김경훈 (admin) | Html | 2012/03/14 20:26:13 | 조회:5262


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; 속성 사용해야 함. / 사용



출처 : http://blog.naver.com/ziniangel02/140149321342
공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [HTML] usemap 사용방법 김경훈 (admin) 2012-03-22 21:09:30
▼ 다음글 [HTML] ime-mode 사용방법 김경훈 (admin) 2012-03-14 13:39:44
페이지 로딩이 끝나면 해당 댓글로 이동 합니다.