AAtomic CSS

white-space

텍스트 내의 공백과 줄바꿈을 어떻게 처리할지 제어하는 속성입니다. 텍스트 줄바꿈 방지, 코드 블록 표시, 사용자 입력 보존 등 다양한 상황에서 활용됩니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
wsnwhite-space: nowrap줄바꿈 방지. 텍스트가 한 줄로 유지됨
wspwhite-space: pre모든 공백과 줄바꿈 보존. 줄바꿈 안 함
wsplwhite-space: pre-line공백 합침, 줄바꿈 보존. 자동 줄바꿈
wspwwhite-space: pre-wrap모든 공백과 줄바꿈 보존. 자동 줄바꿈
wsiwhite-space: initial초기값(normal)으로 리셋

시각적 비교

동일한 텍스트(공백과 줄바꿈 포함)가 각 white-space 값에 따라 어떻게 렌더링되는지 비교합니다.

Nowrap — wsn

Hello, this is a sample text with extra spaces.

공백이 하나로 합쳐지고, 줄바꿈 없이 한 줄로 표시됩니다

Pre — wsp

Hello, this is a sample text with extra spaces.

모든 공백과 줄바꿈이 그대로 보존됩니다. 컨테이너를 넘어가도 줄바꿈하지 않습니다

Pre-line — wspl

Hello, this is a sample text with extra spaces.

연속 공백은 하나로 합쳐지지만, 줄바꿈은 보존됩니다. 컨테이너 가장자리에서 자동 줄바꿈됩니다

Pre-wrap — wspw

Hello, this is a sample text with extra spaces.

모든 공백과 줄바꿈이 보존되며, 컨테이너 가장자리에서 자동 줄바꿈됩니다

Initial (Normal) — wsi

Hello, this is a sample text with extra spaces.

기본값. 공백이 하나로 합쳐지고 필요할 때 자동 줄바꿈됩니다

클래스별 상세

wsnwhite-space: nowrap

텍스트 줄바꿈을 방지합니다. 가장 많이 사용되는 white-space 클래스이며, 한 줄로 유지해야 하는 텍스트, 테이블 헤더, 뱃지, 버튼 라벨 등에 활용합니다. toe(text-overflow: ellipsis)와 함께 자주 사용됩니다.

<!-- Single-line text (prevent wrapping) -->
<th class="wsn">Long table header displayed without line breaks</th>

<!-- Text ellipsis pattern -->
<p class="wsn oh toe maxw30rem">
  This text is displayed with an ellipsis when it overflows the container...
</p>

<!-- Badge, button label -->
<span class="wsn dib py4px px12px bg6366F1 cFFFFFF br4px fs13px">
  Badge without wrapping
</span>

자주 쓰는 조합

wsn oh toe한 줄 텍스트 말줄임 (가장 많이 사용되는 패턴)
wsn oh줄바꿈 방지 + 넘침 숨김
wsn df aic인라인 요소를 한 줄로 정렬

wspwhite-space: pre

모든 공백과 줄바꿈을 그대로 보존합니다. <pre> 태그와 동일한 동작이며, 코드 블록이나 포맷이 중요한 텍스트 표시에 사용합니다. 컨테이너를 넘어가도 줄바꿈하지 않습니다.

<!-- Code block -->
<div class="wsp bg18181B p2rem br8px fs14px cFAFAFA">
function hello() {
    console.log("Hello");
    return true;
}
</div>

<!-- Formatted text -->
<div class="wsp">
Name:    John Doe
Age:     25
City:    Seoul
</div>

wsplwhite-space: pre-line

연속 공백은 하나로 합치지만 줄바꿈은 보존합니다. 사용자가 입력한 줄바꿈을 유지하면서 불필요한 공백은 정리하고 싶을 때 적합합니다.

<!-- Display user input (clean spaces + preserve line breaks) -->
<p class="wspl">
This is the first line.
This is the second line.
This is the third line.
</p>

<!-- Poetry, lyrics, etc. -->
<blockquote class="wspl c71717A fs16px lh1-7">
When you are weary of me
And wish to go,
I shall let you go without a word.
</blockquote>

wspwwhite-space: pre-wrap

모든 공백과 줄바꿈을 보존하면서 컨테이너 가장자리에서 자동으로 줄바꿈합니다. 사용자 입력 콘텐츠(댓글, 게시글 등)를 그대로 표시할 때 가장 적합합니다.

<!-- Comments, post content -->
<div class="wspw bg18181B p2rem br8px">
User-entered    spaces    are preserved as is.
Line breaks are maintained,
and auto-wraps at the container edge.
</div>

<!-- Log output -->
<pre class="wspw fs13px c71717A bg0F0F17 p16px br4px">
[2024-01-15 10:30:00] INFO     Server started
[2024-01-15 10:30:01] DEBUG    Connection established
[2024-01-15 10:30:02] WARNING  High memory usage detected
</pre>

wsiwhite-space: initial

white-space를 초기값(normal)으로 되돌립니다. 반응형이나 부모 요소에서 상속된 white-space 설정을 리셋할 때 사용합니다.

<!-- Reset parent white-space -->
<div class="wsn">
  <span>This text does not wrap</span>
  <p class="wsi">This text returns to normal (auto-wrap)</p>
</div>

<!-- Responsive reset -->
<p class="wsn sm-wsi">
  Desktop: single line / Mobile: auto-wrap
</p>

동작 비교

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스연속 공백줄바꿈 문자자동 줄바꿈
wsn합침무시안 함
wsp보존보존안 함
wspl합침보존함
wspw보존보존함
wsi합침무시함

텍스트 말줄임 패턴

wsn oh toe 조합은 한 줄 텍스트 말줄임 처리에서 가장 많이 사용되는 패턴입니다. 세 클래스가 모두 필요합니다.

말줄임 적용 — wsn oh toe

이것은 매우 긴 텍스트입니다. 컨테이너를 넘어가면 말줄임표(...)로 표시됩니다.

넘치는 텍스트가 ...으로 표시됨

말줄임 없음 (기본)

이것은 매우 긴 텍스트입니다. 컨테이너를 넘어가면 자동으로 줄바꿈됩니다.

기본값은 자동 줄바꿈

<!-- Single-line text ellipsis (required trio) -->
<p class="wsn oh toe maxw30rem">
  This text is displayed with an ellipsis (...) when it overflows the container.
</p>

<!-- Card title ellipsis -->
<div class="bg18181B p2rem br8px">
  <h3 class="wsn oh toe fs16px cFAFAFA mb8px">
    Very long card titles entered here will be truncated with ellipsis
  </h3>
  <p class="c71717A fs14px">Card description text</p>
</div>

<!-- Table cell ellipsis -->
<td class="wsn oh toe maxw20rem">
  Long data overflowing cells is shown as ...
</td>

세 클래스 모두 필수

wsn이 없으면 줄바꿈되어 말줄임 불가. oh가 없으면 텍스트가 넘침. toe가 없으면 ...이 표시되지 않음.

팁 & 주의사항

wsn + oh + toe = 텍스트 말줄임 콤보

한 줄 텍스트 말줄임에서 가장 많이 사용되는 패턴입니다. 카드 제목, 테이블 셀, 리스트 아이템 등 넘치는 텍스트를 깔끔하게 처리합니다.

wsp는 코드 블록에 적합

코드의 들여쓰기와 줄바꿈을 그대로 보존해야 할 때 wsp를 사용하세요. <pre> 태그 없이도 동일한 효과를 얻을 수 있습니다.

wspw는 사용자 입력 콘텐츠에 최적

댓글, 게시글 등 사용자가 입력한 텍스트를 그대로 보여주면서 컨테이너 가장자리에서 자연스럽게 줄바꿈되도록 할 때 wspw를 사용하세요.

word-breakoverflowtexttypography