티스토리 뷰
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
'PDR Tech log' 카테고리의 다른 글
Visual Studio Code에서 NodeJS, Javascreipt 타입 힌팅 사용하기 (0) | 2017.10.12 |
---|---|
12 Factors Explanation (0) | 2017.10.10 |
CSS - Text 개행 처리 (0) | 2017.10.08 |
MySQL 사용자 계정 관리 (0) | 2017.10.02 |
generator yield* (0) | 2017.09.25 |
아두이노 배우기 (프로그래밍을 위한 기초) - 많이 사용하는 함수들 (0) | 2017.06.30 |
댓글
공지사항
최근에 달린 댓글
- Total
- 308,457
- Today
- 18
- Yesterday
- 61