메뉴 건너뛰기

ㅇr름ㄷr운총각's 끄적끄적

조회 수 2721 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄


 white-space 

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


white-space:normal;



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


- 코드에서의 원래 텍스트

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



white-space:pre;



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



white-space:nowrap;



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

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



 word-break 

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


white-break:normal;



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

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



word-break:break-all;



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



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;를 사용한다.




언제 어디서나 좋은 정보 티알조아 - www.trzoa.com



List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
12 프로그램 php 날짜 계산식 아름다운총각 2016.05.31 602
11 DB SQL 순위구하기 팁 아름다운총각 2015.06.02 1520
» CSS 텍스트 줄바꿈, 글자자르기 CSS 아름다운총각 2015.02.27 2721
9 DB [mysql] 문자열의 일부를 반환하는 substr, substring_index 함수 아름다운총각 2015.02.13 2821
8 OS 리눅스에서 사용자 완벽 삭제방법 아름다운총각 2014.12.09 4420
7 OS [CentOS] 윈도우 네트워크드라이브 mount 방법 아름다운총각 2014.12.08 2842
6 DB 오라클 NVL함수 & DECODE함수 아름다운총각 2014.12.03 2892
5 DB [MySQL] 테이블 구조복사, 자료복사 아름다운총각 2014.12.01 2531
4 OS Ruby on Rails 를 리눅스에 설치하기 아름다운총각 2014.12.01 2589
3 프로그램 [html5] video 사용법 아름다운총각 2014.11.26 3424


Board Pagination Prev 1 ... 2 Next
/ 2