Text 개행 처리 및 글자 자르기

CSS 퍼블리싱 작업을 하면서 유용하게 쓸 수 있는 CSS를 이용한 Text 개행 처리에 대해서 알아 보겠습니다.

주로 많이 쓰이는 때는 역시 글이 많이 쓰이는 게시판 구조의 프로젝트를 진행 할 때 라고 생각합니다.

white-space - 공백 기준 줄바꿈(띄어쓰기 및 줄바꿈 공백)

value

• normal
• pre
• nowrap 

Default - normal

white-space: normal 

연속되는 여러 칸의 공백이나 줄바꿈을 하나(1칸)로 인식한다. 지정된 넓이 끝에서 자동으로 줄 바꿈한다.

white-space: pre

연속되는 여러 칸의 공백을 실제 입력된 그대로 보여 준다. 줄바꿈도 마찬가지로 실제 입력된 그대로 보여 준다.

하지만 지정된 넓이 보다 오버 되도 강제 줄바꿈을 하지 않는다.

white-space: nowrap

연속되는 여러 칸의 공백이나 줄바꿈을 하나(1칸)로 인식한다.

지정된 넓이의 범위를 벗어나도 강제 줄바꿈을 하지 않도록 막는다.

word-break - 텍스트 블럭요소 기준 줄바꿈(단어 및 글자)

value

• normal
• break-all
• keep-all 

Default - normal

word-break: normal 

단어 단위로 끊어서 줄바꿈

그렇기 때문에 지정 된 넓이 범위에 꽉 차지 않고 오른쪽이 조금씩 비어 있는 형태다.

word-break: break-all

글자 단위로 끊어서 줄바꿈

그렇기 때문에 지정 된 넓이 범위에 글자가 꽉 차있는 형태다.

word-break: keep-all

한글 일 경우 띄어 쓰기 기준으로 줄바꿈 해준다.

text-overflow - text가 오버플로우 되었을 때 처리 방식을 지정

value

• clip
• ellipsis

text-overflow: clip

상자 테두리에 닿게 되면 오버플로우 된 문자들을 모두 자른다.

text-overflow: ellipsis

상자 테두리에 닿게 되면 오버플로우 된 문자들을 ... 으로 바꾼다.

** 주의 사항! **

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

width 값은 단위가 꼭 px이 아니여도 된다. %도 가능하다.




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

-by seung