티스토리 뷰

PDR Tech log

CSS - Text 개행 처리

PDR 비비로그 2017.10.08 09:48

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이 아니여도 된다. %도 가능하다.




-by seung


댓글
댓글쓰기 폼