본문 바로가기

CSS

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


'CSS' 카테고리의 다른 글

[CSS] position  (0) 2018.08.17
[CSS] margin collapsing (마진 상쇄)  (0) 2018.08.05
[CSS] box model과 box-sizing  (0) 2018.08.02
[CSS] display - block과 inline 그리고 inline-block  (0) 2018.08.02
Text 개행 처리 및 글자 자르기  (0) 2017.07.18