CSS를 사용하여 텍스트 길이를 n 줄로 제한

 

질문 : CSS를 사용하여 텍스트 길이를 n 줄로 제한

---

CSS를 사용하여 텍스트 길이를 "n"줄로 제한 할 수 있습니까 (또는 세로로 오버플로되면 잘라 내기).

text-overflow: ellipsis; 한 줄 텍스트에만 작동합니다.

원본 텍스트 :

농구 마우스는 부동산을 느끼고 내일 일부 아이들은
게임과 칠리는 트럭으로 졸업했습니다.
CNN은 이제 냄비를 투자합니다! 하지만 그것은! 얼마나 못생긴 집
마우스 개발자! Dapibus sed fermentum, magna sagittis, lorem velit

원하는 출력 (2 줄) :

농구 마우스는 부동산을 느끼고 내일 일부 아이들은
게임과 칠리는 트럭으로 졸업했습니다.

답변

---

비공식 라인 클램프 구문을 사용하는 방법이 있으며 Firefox 68부터 모든 주요 브라우저에서 작동합니다.

 

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

IE 사용자를 신경 쓰지 않는 한 line-height 및 max-height 폴백을 수행 할 필요가 없습니다.

출처 : https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css