관리자 0 254 0 0

http://dolly77.tistory.com/5 

 

 

white-space 

공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등)

 

white-space:normal;

 

 

 

normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다.

 

- 코드에서의 원래 텍스트

여수 밤바다 이    조명에 담긴    아름다운    얘기가 있어 네게 들려주고파

 

 

white-space:pre;

 

 

 

띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다.

white-space:nowrap;

 

 

 

여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 

넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다.

 

 

 word-break 

텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 CSS (강제 줄바꿈 방지, 텍스트길이 제한)

 

word-break:normal;

 

 

 

normal이 기본값, 단어 단위로 끊어서 줄바꿈 한다 .

(단어 단위로 줄바꿈되어 오른쪽 공간이 꽉차지 않고 비어있는 형태다.)

 

 

word-break:break-all;

white-space:pre-line; 

 

 

 

글자 단위로 줄바꿈 한다. (글자단위로 줄바꿈이 되어 글자가 박스 안에서 가득차는 형태다.)

 

 

word-breka:keep-all;

한글일 경우 띄어쓰기 기준으로 줄바꿈 해준다. (ie계열/아시아 언어만 지원,파폭 3.5이상에서는 지원)

 

 

 text-overflow 

텍스트가 overflow 되었을때 어떻게 처리할 것인가를 나타내는 CSS ( overflow 속성이 값을 갖고 있을때 적용가능)

 

 

text-overflow:clip;

엘리먼트 테두리에서 글자가 잘리게 된다.

 

text-overflow:ellipsis;

테두리에 닿을 정도가 되면 자동으로 ....을 넣어준다.

 

 

 적용시 참고사항 

text-overflow:ellipsis는고정된 width값, white-space:nowrap; overflow:hidden 속성이 있어야 적용가능하다.

 

 

 

div{ width:250px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; padding:10px; border:1px solid #e5e5e5; background:#f5f5f5; }

 

 

 

특수문자, 숫자, 영어가 띄어쓰기 없이 나열되었을때, (한글과 표기되는 형식이 다르다.)

 

 

 

기본값을 그대로 쓴다면 지정된 엘리먼트 밖으로 글자가 뚫고 나온다.

 

1. word-break:break-all 을 사용 하여 자동줄바꿈이 되게 해야 한다.

2. 파폭, 오페라는 이 속성이 적용되지 않기 때문에 word-break:break-word 를 사용하여야 한다.

3. table 안에 td에 적용 할러면 table-layout:fixed;를 사용한다.

 

 

출처: http://dolly77.tistory.com/5 [interactive]

Comments


제목 글쓴이
jquery - 부모창 이탈시(새로고침/닫기/앞으로/뒤로) 자식창 종료 마스터욱
부트스트랩 modal width auto 마스터욱
자주쓰는 미디어 쿼리 댓글 1 마스터욱
iframe 사용시 레퍼러를 숨기는 방법 마스터욱
capture="camera" 마스터욱
highcharts series data push example 마스터욱
DIV 높이 100%로 주기 마스터욱
뺑글이(로딩) 이미지와 CSS 마스터욱
백그라운드만 까맣게 처리하기, 폰트는 그대로 마스터욱
스마트 에디터 모바일에 최적화 시키기 마스터욱
Jquery Mobile 샘플 마스터욱
미디어 쿼리 기준픽셀 마스터욱
크로스 브라우징 HTML5 Audio 동영상 태그 마스터욱
jquery anchor(앵카) 구현하기 마스터욱
jquery data-mask 마스터욱
자바스크립트 - ksort(키값에 의한 정렬) 마스터욱
javascript - 브라우저 뒤로가기 버튼 눌렀을 경우, 질문하기 마스터욱
부트스트랩 네비게이션 서브메뉴 마우스 오버시에 하위메뉴 펼치기 마스터욱
부트스트랩 fieldset 마스터욱
부트스트랩 모달(modal) 가로(width) 사이즈 자동 관리자
카테고리