고정 헤더 영역
상세 컨텐츠
본문
웹사이트에서 흔히보이는 그 이상 넘어갈시 나오는 ... 처리
한줄 ... 처리
overflow: hidden 으로 그 이상 보여지는 부분은 hidden 처리시킴
white-space: nowrap 으로 줄바꿈x 처리 ( 기본값 wrap )
text-overflow: ellipsis 으로 끝부분 ...처리 ( 기본값 clip )
------------------------------------------
두줄 이상 ... 처리
한줄 처리 white-space: nowrap 지우고
overflow: hidden 으로 그 이상 보여지는 부분은 hidden 처리시킴
text-overflow: ellipsis 으로 끝부분 ...처리 ( 기본값 clip )
display: -webkit-box ; = 두줄 이상을 ...처리할때 무조건 필요한 선언
word-wrap : break-word ; = 줄 바꿈 속성
-webkit-box-orient: ? vertical ; = 세로 방향으로 설정한다는 뜻
-webkit-line-clamp: ? ; = 몇번째 줄에 ... 처리 할지
line-height로 한칸 높이를 40으로 잡고
박스의 높이를 80으로 잡았다
두줄 이상 처리는 글 작성하면서 처음 알았다.
'CSS' 카테고리의 다른 글
| [CSS] position(absolute, relative, fixed, sticky), z-index (0) | 2022.05.15 |
|---|---|
| [CSS] 선택자(pseudo class) nth-child, first/last-child, not, before/after (0) | 2022.05.15 |
| [CSS] grid 레이아웃 (0) | 2022.05.13 |
| [CSS] flexbox 레이아웃 (0) | 2022.05.13 |
| [CSS] 전처리기 SASS/SCSS 셋팅, 문법 (0) | 2022.04.16 |
