css로 글자의 라인수를 제한하는 방법

css로 글자의 라인수를 제한하는 방법에는 여러가지가 있다.

한 줄로 제한하기(white-space)

css로 최대 라인 수를 한 줄로 제한하고 마지막에 …을 넣어줄 수 있다.

white-space: nowrap;
/* 텍스트가 띄어쓰기 되지 않게 한다 */
overflow: hidden;
/* 띄어쓰기 되지 않게 하고 넘친 부분은 숨긴다.*/
text-overflow: ellipsis;
/* 요소에 넘치는 부분을 ...로 대체하게 된다.*/

두 줄로 제한하기(webkit-line-clamp)

한 줄이 아닌 여러줄로도 제한할 수 있다.

-webkit-line-clamp 속성을 통해 최대 줄 수를 제한할 수 있다.

이를 사용하기 위해선 아래와 같은 css 속성 또한 적용해야 한다.

display: -webkit-box (또는 -webkit-inline-box)
-webkit-box-orient: vertical
-webkit-line-clamp: 3 (integer)
overflow: hidden;

최종 결과는 다음과 같다.

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

ref

CSS로 텍스트 라인수를 제한하는 방법

-webkit-line-clamp mdn