Programing Language/CSS

CSS ) div에서 2줄 이상 넘어갈때 ... 처리 하는 방법

Jude_Song 2023. 1. 30. 18:38
728x90
반응형
.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
반응형