-
CSS / 텍스트 줄임 ...처리Web dev/HTML&CSS 2022. 3. 13. 17:27728x90반응형
퍼블을 하다보면 자주 쓰게 되는 ...처리
...처리는 한줄..과 여러줄..하는법이 약간 다르다.
/*한줄 자르기*/ .text{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ..표시는 블럭속성이여야 한다 */
/*여러줄 자르기*/ .text{ white-space: normal; line-height: 1.2; height: 3.6em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
728x90반응형'Web dev > HTML&CSS' 카테고리의 다른 글
CSS / typeit 라이브러리로 html 타이핑 효과 주기 (0) 2023.04.23 CSS / 따라다니는 마우스 포인터 커스텀하기 (0) 2023.04.23 CSS / Scollbar custom 스크롤바 커스텀하기 (0) 2022.10.30 CSS / placeholder 색상바꾸기 (0) 2022.03.13