text-overflow

넘치는 텍스트를 어떻게 표시할지 결정합니다. 말줄임표(...)로 잘린 텍스트를 표현하는 것이 가장 일반적인 용도이며, toe는 웹에서 가장 많이 사용되는 텍스트 절단 방법입니다.

클래스 목록

클래스	CSS	설명
`toe`	text-overflow: ellipsis	넘치는 텍스트를 ... 으로 표시
`toc`	text-overflow: clip	기본값. 넘치는 텍스트를 표시 없이 자름

한 줄 말줄임 패턴

wsn oh toe — 이 세 클래스의 조합이 텍스트 말줄임의 핵심입니다. 세 가지가 모두 있어야 동작합니다.

클래스	역할	빠지면?
`wsn`	줄바꿈 금지 (white-space: nowrap)	텍스트가 줄바꿈되어 넘치지 않음
`oh`	넘침 숨김 (overflow: hidden)	텍스트가 컨테이너 밖으로 넘침
`toe`	말줄임표 표시 (text-overflow: ellipsis)	잘리지만 ... 없이 잘림

필수 조건

toe는 단독으로 동작하지 않습니다. 반드시 wsn(줄바꿈 금지) + oh(넘침 숨김)와 함께 사용해야 합니다.

<!-- Basic single-line truncation -->
<div class="w200px wsn oh toe">
  Very long text that gets truncated with an ellipsis
</div>
<!-- wsn: white-space: nowrap
     oh:  overflow: hidden
     toe: text-overflow: ellipsis -->

시각적 비교

같은 긴 텍스트를 고정 너비 컨테이너에 넣었을 때 각 방식의 차이입니다.

말줄임 없음 (기본) — 기본 상태

이것은 매우 긴 텍스트입니다. 컨테이너 너비를 초과하면 text-overflow 속성에 따라 다르게 처리됩니다. Atomic CSS에서 말줄임 처리는 wsn oh toe 조합으로 간단하게 구현할 수 있습니다.

텍스트가 줄바꿈되어 여러 줄로 표시됩니다

wsn만 적용 — wsn

줄바꿈이 금지되어 컨테이너 밖으로 넘칩니다

wsn + oh — wsn oh

넘친 텍스트가 숨겨지지만 말줄임표가 없습니다

wsn + oh + toe (완성) — wsn oh toe

넘친 텍스트가 ...으로 표시됩니다 — 이것이 올바른 패턴입니다

클래스별 상세

`toe`text-overflow: ellipsis

넘치는 텍스트를 ...으로 표시합니다. 카드 제목, 테이블 셀, 리스트 항목 등 고정 너비 안에 긴 텍스트를 넣어야 할 때 가장 많이 사용합니다.

<!-- Single-line ellipsis (most common pattern) -->
<p class="wsn oh toe">
  If this text is longer than the container, it is truncated with ...
</p>

<!-- Card Title -->
<div class="w30rem bg18181B p2rem br8px">
  <h3 class="wsn oh toe fs16px fw700 cFAFAFA mb8px">
    Very long card titles are truncated with ellipsis
  </h3>
  <p class="c71717A fs14px lh1-7">Card description</p>
</div>

<!-- Used in table cells -->
<td class="wsn oh toe maxw20rem">
  Long data does not break the table layout
</td>

<!-- Used in flex children -->
<div class="df aic gap12px">
  <img class="w4rem h4rem br50p" />
  <span class="fg1 wsn oh toe">Long username or email address</span>
</div>

자주 쓰는 조합

`wsn oh toe`	한 줄 말줄임 (필수 3종 세트)
`wsn oh toe w100p`	부모 너비에 맞춘 말줄임
`wsn oh toe maxw30rem`	최대 너비 제한 + 말줄임
`db wsn oh toe`	블록 요소로 변환 후 말줄임

`toc`text-overflow: clip

기본값입니다. 넘치는 텍스트를 표시 없이 잘라냅니다. 말줄임표가 필요 없고 단순히 잘리면 되는 경우에 사용합니다.

<!-- Default: clip without indicator -->
<div class="w20rem oh">
  <p class="wsn toc">
    Overflowing text is clipped but ... is not shown
  </p>
</div>

멀티라인 말줄임 (line-clamp)

toe는 한 줄 말줄임만 가능합니다. 여러 줄에서 말줄임이 필요하면 lc(line-clamp) 클래스를 사용합니다.

<!-- 2-line ellipsis -->
<p class="lc2-20px">
  Long text is shown up to 2 lines, the rest is truncated with ...
  This pattern is suitable for card descriptions, post previews, etc.
</p>

<!-- 3-line ellipsis -->
<p class="lc3-1-5rem">
  Long text is shown up to 3 lines. Setting line-height to 1.5rem
  allows for precise height calculation.
</p>

2줄 말줄임 — lc2-20px

이것은 매우 긴 텍스트입니다. 컨테이너 너비를 초과하면 text-overflow 속성에 따라 다르게 처리됩니다. Atomic CSS에서 말줄임 처리는 wsn oh toe 조합으로 간단하게 구현할 수 있습니다. 이것은 매우 긴 텍스트입니다. 컨테이너 너비를 초과하면 text-overflow 속성에 따라 다르게 처리됩니다. Atomic CSS에서 말줄임 처리는 wsn oh toe 조합으로 간단하게 구현할 수 있습니다.

2줄까지 표시하고 나머지는 말줄임

3줄 말줄임 — lc3-1-5rem

3줄까지 표시하고 나머지는 말줄임

클래스	설명
`lc2-20px`	2줄 말줄임, line-height: 20px
`lc3-1-5rem`	3줄 말줄임, line-height: 1.5rem
`lc4-2rem`	4줄 말줄임, line-height: 2rem

팁 & 주의사항

toe는 혼자 동작하지 않음

toe는 반드시 wsn + oh와 함께 사용해야 합니다. 이 셋 중 하나라도 빠지면 말줄임이 동작하지 않습니다.

고정 너비가 필요

말줄임이 동작하려면 요소의 너비가 제한되어야 합니다. w100p, maxw30rem 등으로 너비를 지정하거나, flex/grid 자식이면 자동으로 제한됩니다.

한 줄 vs 여러 줄

한 줄 말줄임은 wsn oh toe, 여러 줄 말줄임은 lc3-1-5rem 같은 line-clamp 클래스를 사용하세요. line-clamp은 wsn, oh, toe를 개별로 지정할 필요 없이 자체적으로 처리합니다.

white-space overflow line-clamp word-break