line-clamp

텍스트를 지정된 줄 수로 잘라내고 말줄임표(...)를 표시합니다. -webkit-line-clamp, line-height, max-height, overflow: hidden을 한 클래스로 결합합니다.

패턴

lc{줄수}-{lineHeight}

줄 수와 line-height를 하이픈으로 연결합니다. line-height 값의 소수점도 하이픈으로 표현합니다.

부분	설명	예시
lc	line-clamp 접두사	`lc`
{줄수}	표시할 최대 줄 수	`1, 2, 3`
-	구분 하이픈	`-`
{lineHeight}	line-height 값 (단위 포함)	`20px, 1-5rem`

클래스 목록

클래스	줄 수	line-height	설명
`lc1-16px`	1	16px	1줄 클램프, line-height 16px
`lc1-20px`	1	20px	1줄 클램프, line-height 20px
`lc2-20px`	2	20px	2줄 클램프, line-height 20px
`lc2-1-5rem`	2	1.5rem	2줄 클램프, line-height 1.5rem (15px)
`lc3-20px`	3	20px	3줄 클램프, line-height 20px
`lc3-1-5rem`	3	1.5rem	3줄 클램프, line-height 1.5rem (15px)
`lc4-20px`	4	20px	4줄 클램프, line-height 20px

생성되는 CSS

line-clamp 클래스는 내부적으로 여러 CSS 속성을 한 번에 설정합니다.

/* lc2-20px가 생성하는 CSS */
.lc2-20px {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 20px;
  max-height: 40px; /* 2 × 20px */
}

/* lc3-1-5rem이 생성하는 CSS */
.lc3-1-5rem {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5rem;
  max-height: 4.5rem; /* 3 × 1.5rem */
}

시각적 비교

같은 텍스트에 다른 줄 수의 line-clamp을 적용한 결과를 비교합니다.

1줄 클램프 — lc1-20px

Atomic CSS는 각 CSS 속성을 하나의 클래스로 매핑하는 방법론입니다. 클래스 이름만으로 어떤 스타일이 적용되는지 바로 알 수 있으며, 불필요한 CSS 중복을 제거하여 번들 크기를 줄일 수 있습니다. 컴포넌트 단위가 아닌 속성 단위로 스타일을 관리하므로, 디자인 시스템의 일관성을 유지하기에 유리합니다.

2줄 클램프 — lc2-20px

3줄 클램프 — lc3-20px

클램프 없음 (원본 텍스트)

실전 패턴

line-clamp은 카드 컴포넌트의 설명 텍스트를 일정한 높이로 유지하는 데 가장 많이 사용됩니다.

카드 목록 (2줄 클램프)

카드 제목 A

짧은 설명입니다.

카드 제목 B

Atomic CSS는 각 CSS 속성을 하나의 클래스로 매핑하는 방법론입니다. 클래스 이름만으로 어떤 스타일이 적용되는지 바로 알 수 있습니다.

카드 제목 C

컴포넌트 단위가 아닌 속성 단위로 스타일을 관리하므로 디자인 시스템의 일관성을 유지하기에 매우 유리합니다.

리스트 아이템 (1줄 클램프)

아이템 제목

짧은 한 줄 설명 텍스트입니다.

아이템 제목

Atomic CSS는 각 CSS 속성을 하나의 클래스로 매핑하여 사용하는 방법론으로, 클래스 이름만으로 스타일을 파악할 수 있습니다.

아이템 제목

컴포넌트 기반이 아닌 속성 기반의 스타일 관리 방식을 통해 디자인 시스템의 일관성과 번들 최적화를 동시에 달성합니다.

사용 예시

<!-- 카드 설명 2줄 클램프 -->
<div class="bg18181B p16px br8px">
  <h3 class="fs16px cFAFAFA fw600 mb8px">카드 제목</h3>
  <p class="fs14px c71717A lc2-20px mb12px">
    긴 설명 텍스트가 여기에 들어갑니다.
    2줄을 초과하면 말줄임표로 잘립니다...
  </p>
  <a href="#" class="fs12px c6366F1">더 보기</a>
</div>

<!-- 리스트 아이템 1줄 클램프 -->
<div class="df aic gap12px">
  <div class="w4rem h4rem bg6366F1 br4px fs0"></div>
  <div class="fg1 minw0">
    <p class="fs14px cFAFAFA fw600">아이템 제목</p>
    <p class="fs12px c71717A lc1-16px">
      긴 부제목이 한 줄에서 잘리고 말줄임표가 표시됩니다.
    </p>
  </div>
</div>

<!-- 3줄 클램프 (rem 단위) -->
<p class="fs14px c71717A lc3-1-5rem">
  rem 단위의 line-height를 사용합니다.
  소수점은 하이픈으로 표현합니다.
  3줄을 초과하면 잘립니다.
</p>

팁 & 주의사항

line-height 매칭이 중요

클래스의 line-height 값과 실제 텍스트의 font-size에 맞는 line-height를 사용해야 합니다. lc2-20px는 line-height: 20px 기준으로 max-height를 계산합니다.

카드 높이 균일화

카드 목록에서 설명 텍스트 길이가 제각각일 때, line-clamp으로 동일한 높이를 유지하면 그리드 레이아웃이 깔끔해집니다.

rem 단위 소수점 표기

rem 단위의 소수점은 하이픈으로 표현합니다. lc3-1-5rem은 3줄, line-height: 1.5rem을 의미합니다. 하이픈이 이중으로 사용되므로 주의하세요.

부모에 minw0 필요 (flex)

flex 자식 요소에서 line-clamp이 작동하지 않으면, 부모에 minw0을 추가하세요. flex 아이템의 기본 min-width가 텍스트 잘림을 방해할 수 있습니다.

text-overflow white-space overflow line-height word-break

line-clamp

패턴

클래스 목록

생성되는 CSS

시각적 비교

실전 패턴

사용 예시

팁 & 주의사항

관련 속성