React
//
//

텍스트에 대해 라인 수 제한하는 방법

CSS로 텍스트 라인수를 제한하는 방법
웹에서 어떤 글의 목록의 제목, 혹은 본문 요약 부분 등은 일정 줄 수 이상에 대해서는 "..." 로 표시되는 경우를 많이 보셨을 것입니다. 아무래도 제목이나 본문 요약 등은 길이가 동일한 것이 디자인 측면에서 좋겠죠? 이러한 텍스트 라인수의 조절은 여러 가지 방법이 있겠습니다만, 간단하게는 CSS를 통해서 해당 기능을 구현할 수 있습니다.
https://paperblock.tistory.com/215
2줄이 넘어가면 말줄임표를 보여주기 위한 CSS
display: -webkit-box (또는 -webkit-inline-box) -webkit-box-orient: vertical -webkit-line-clamp: 3 (integer) overflow: hidden;
CSS
복사

브라우저 지원

•
webkit-line-clamp는 IE를 제외한 대부분의 브라우저에서 지원을 한다.
https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp
Made with