-
CSS ) div에서 2줄 이상 넘어갈때 ... 처리 하는 방법Programing Language/CSS 2023. 1. 30. 18:38728x90반응형
.card { max-width: calc(100% - 38px); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 얘네를 추가히준다 -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
- display: -webkit-box 속성은 해당 영역을 box 형태로 관리된다.
- -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정한다.
- -webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 만든다.
결과화면
두 줄로 잘보인다!
도움 되셨다면 하단의 광고 클릭 세엔스!!
728x90반응형'Programing Language > CSS' 카테고리의 다른 글
CSS) input 타입 number에서 옆 방향키 없애기 (0) 2022.05.16 CSS) 스크롤 없애고 기능은 계속 사용하기 (0) 2021.12.01 CSS) 로딩 애니메이션 오픈소스 주소 (0) 2021.11.29 CSS) CSS로 img태그에 src 이미지 넣기 (0) 2021.11.25 HTML) a 태그에서 클릭으로 새창 실행시키기 (0) 2021.10.07