AAtomic CSS

white-space

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

클래스 목록

클래스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)와 함께 자주 사용됩니다.

<!-- 한 줄 텍스트 (줄바꿈 방지) -->
<th class="wsn">긴 테이블 헤더가 줄바꿈 없이 표시됩니다</th>

<!-- 텍스트 말줄임 패턴 -->
<p class="wsn oh toe maxw30rem">
  이 텍스트는 컨테이너를 넘어가면 말줄임표로 표시됩니다...
</p>

<!-- 뱃지, 버튼 라벨 -->
<span class="wsn dib py4px px12px bg6366F1 cFFFFFF br4px fs13px">
  줄바꿈 없는 뱃지
</span>

자주 쓰는 조합

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

wspwhite-space: pre

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

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

<!-- 포맷 유지 텍스트 -->
<div class="wsp">
이름:    홍길동
나이:    25
주소:    서울시
</div>

wsplwhite-space: pre-line

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

<!-- 사용자 입력 표시 (공백 정리 + 줄바꿈 유지) -->
<p class="wspl">
첫 번째 줄입니다.
두 번째 줄입니다.
세 번째 줄입니다.
</p>

<!-- 시(詩), 가사 등 -->
<blockquote class="wspl c71717A fs16px lh1-7">
나 보기가 역겨워
가실 때에는
말없이 고이 보내 드리우리다
</blockquote>

wspwwhite-space: pre-wrap

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

<!-- 댓글, 게시글 내용 -->
<div class="wspw bg18181B p2rem br8px">
사용자가 입력한    공백도    그대로 보존됩니다.
줄바꿈도 유지되고,
컨테이너 가장자리에서 자동으로 줄바꿈됩니다.
</div>

<!-- 로그 출력 -->
<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 설정을 리셋할 때 사용합니다.

<!-- 부모의 white-space 리셋 -->
<div class="wsn">
  <span>이 텍스트는 줄바꿈 안 됨</span>
  <p class="wsi">이 텍스트는 normal로 돌아감 (자동 줄바꿈)</p>
</div>

<!-- 반응형 리셋 -->
<p class="wsn sm-wsi">
  데스크탑: 한 줄 / 모바일: 자동 줄바꿈
</p>

동작 비교

클래스연속 공백줄바꿈 문자자동 줄바꿈
wsn합침무시안 함
wsp보존보존안 함
wspl합침보존함
wspw보존보존함
wsi합침무시함

텍스트 말줄임 패턴

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

말줄임 적용 — wsn oh toe

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

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

말줄임 없음 (기본)

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

기본값은 자동 줄바꿈

<!-- 한 줄 텍스트 말줄임 (필수 3종 세트) -->
<p class="wsn oh toe maxw30rem">
  이 텍스트는 컨테이너를 넘어가면 말줄임표(...)로 표시됩니다.
</p>

<!-- 카드 제목 말줄임 -->
<div class="bg18181B p2rem br8px">
  <h3 class="wsn oh toe fs16px cFAFAFA mb8px">
    매우 긴 카드 제목이 여기에 들어가면 말줄임 처리됩니다
  </h3>
  <p class="c71717A fs14px">카드 설명 텍스트</p>
</div>

<!-- 테이블 셀 말줄임 -->
<td class="wsn oh toe maxw20rem">
  긴 데이터가 셀을 넘어가면 ...으로 표시
</td>

세 클래스 모두 필수

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

팁 & 주의사항

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

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

wsp는 코드 블록에 적합

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

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

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

word-breakoverflowtexttypography