AAtomic CSS

line-clamp

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

패턴

lc{lines}-{lineHeight}

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

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">부분설명예시
lcline-clamp 접두사lc
{lines}표시할 최대 줄 수1, 2, 3
-구분 하이픈-
{lineHeight}line-height 값 (단위 포함)20px, 1-5rem

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스줄 수line-height설명
lc1-16px116px1줄 클램프, line-height 16px
lc1-20px120px1줄 클램프, line-height 20px
lc2-20px220px2줄 클램프, line-height 20px
lc2-1-5rem21.5rem2줄 클램프, line-height 1.5rem (15px)
lc3-20px320px3줄 클램프, line-height 20px
lc3-1-5rem31.5rem3줄 클램프, line-height 1.5rem (15px)
lc4-20px420px4줄 클램프, line-height 20px

생성되는 CSS

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

/* CSS generated by lc2-20px */
.lc2-20px {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 20px;
  max-height: 40px; /* 2 × 20px */
}

/* CSS generated by lc3-1-5rem */
.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 is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.

2줄 클램프 — lc2-20px

Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.

3줄 클램프 — lc3-20px

Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.

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

Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.

실전 패턴

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

카드 목록 (2줄 클램프)

카드 제목 A

짧은 설명입니다.

Read more

카드 제목 B

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

Read more

카드 제목 C

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

Read more

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

아이템 제목

A short single-line description text.

아이템 제목

Atomic CSS is a methodology that maps each CSS property to a single class, letting you understand styles just from class names.

아이템 제목

By managing styles at the property level rather than the component level, it achieves both design system consistency and bundle optimization.

사용 예시

<!-- Card description 2-line clamp -->
<div class="bg18181B p16px br8px">
  <h3 class="fs16px cFAFAFA fw600 mb8px">Card Title</h3>
  <p class="fs14px c71717A lc2-20px mb12px">
    Long description text goes here.
    Truncated with ellipsis when exceeding 2 lines...
  </p>
  <a href="#" class="fs12px c6366F1">Read more</a>
</div>

<!-- List item 1-line clamp -->
<div class="df aic gap12px">
  <div class="w4rem h4rem bg6366F1 br4px fs0"></div>
  <div class="fg1 minw0">
    <p class="fs14px cFAFAFA fw600">Item title</p>
    <p class="fs12px c71717A lc1-16px">
      Long subtitle is truncated to one line with ellipsis.
    </p>
  </div>
</div>

<!-- 3-line clamp (rem unit) -->
<p class="fs14px c71717A lc3-1-5rem">
  Uses rem unit for line-height.
  Decimals are expressed with hyphens.
  Truncated when exceeding 3 lines.
</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-overflowwhite-spaceoverflowline-heightword-break