CSS로 최대 라인 수와 최소 라인 수를 고정하는 방법을 알아보자

들어가면서

안녕하세요. 요즘에 플러피(fluffy)라는 온라인 시험 문제 제작 및 관리 서비스를 만들고 있습니다.

 

이 서비스에는 시험 목록을 보여주는 부분이 많습니다. 시험 목록에는 아래와 같은 카드가 존재하고, 여기에 시험을 설명하는 글이 들어갑니다. 시험 설명 글의 줄 수에 따라 카드의 높이가 달라지게 됩니다. 저는 카드마다 높이가 다른 것은 일관성이 없어 보기가 불편했습니다.

이러한 이유로 시험 설명의 최대 라인 수와 최소 라인 수를 고정해보았습니다.

최대 라인 수 고정

먼저, 최대 라인 수를 고정하는 법을 알아보겠습니다.

이 속성을 적용할 경우, 줄 수는 최대 3줄까지 늘어나고, 그것을 넘어가면 "..."으로 처리하게 됩니다.

{
    overflow: hidden; // 넘치는 부분을 숨김
    display: -webkit-box; // 텍스트 수직 정렬
    -webkit-box-orient: vertical; // 텍스트 수직 정렬
    -webkit-line-clamp: 3; // 텍스트 줄 수 및 줄 수 초과 시 생략 부분 처리 ex) "..."
}

최소 라인 수 고정

다음으로, 최소 라인 수를 고정하는 방법을 알아보겠습니다.

line-clamp만을 적용할 경우 특정 라인 수보다 적을 경우는 높이가 줄어들게 됩니다. 그렇기 때문에 라인 당 높이와 줄 수를 곱한 값을 높이로 지정해주어야 합니다. 이렇게 할 경우 line-clamp 값보다 적은 줄 수여도 카드가 줄어들지 않습니다.

{
    font-size: 0.875rem; // 예시
    line-height: 1.25rem; // 20px
    height: 3.75rem; // 라인 당 높이 1.25rem X 3줄 = 3.75rem
}

적용 결과

다음의 이미지에서 좌측 상단 카드와 같이 줄 수가 3줄을 넘어갈 경우 "..."처리됩니다. 참고로 이 카드의 시험 설명도 높이가 60px입니다.

중앙 하단의 카드는 한 줄만 있음에도 높이가 60px로 높이가 3줄과 동일하게 되었습니다.

높이를 고정한 카드 이미지