텍스트 줄바꿈 white-space, word-break, text-overflow

페이지 정보

profile_image
작성자 LJM
댓글 0건 조회 193회 작성일 18-10-23 21:49

본문

white-space : 글자 공백 처리

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

- pre : 입력한 칸 수대로 줄바꿈도 엔터친 그대로 보여좀. 넘어가는 부분에서 강제 줄바꿈 되지 않음

- nowrap : 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식. 넓이가 지정되있어도 자동으로 줄바꿈을 하지 않는다.

 

 

word-break : 글자가 넘칠 경우 처리 방식. 텍스트가 들어가는 블럭 요소의 넓이에 맞춰 줄바꿈 (강제 줄바꿈 방지, 텍스트길이 제한 등에 사용)

- normal : 기본값, 단어 단위로 끊어서 줄바꿈 (단어 단위로 줄바꿈되어 오른쪽 공간이 꽉차지 않고 비어있다)

- break-all : 글자 단위로 줄바꿈 (글자 단위로 줄바꿈이 되어 글자가 박스 안에서 가득차있는형태). text-align : justify와 비슷

- keep-all : 한글일 경우 띄어쓰기 기준으로 줄바꿈(ie/아시아 언어만 지원, 파이어폭스는 3.5이상부터 지원)

 

 

 

text-overflow : 텍스트가 overflow 됬을 때 어떻게 처리할지를 나타냄. overflow 속성값 갖고 있을 때 적용가능

- clip :  엘리먼트 테두리에서 글자가 잘림

- ellipsis : 테두리에 닿을 정도가 되면 자동으로 ...을 넣어줌

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

 

 

그 외

 

4. word-spacing : 단어 간격

 

5. word-wrap : 단어가 넘칠 경우 처리 방식


댓글목록

등록된 댓글이 없습니다.

로그인