white-space

Controls how whitespace and line breaks are handled. For preventing wrapping, code blocks, preserving user input.

Class List

Class	CSS	Description
`wsn`	white-space: nowrap	Prevent wrapping. Text stays on one line
`wsp`	white-space: pre	Preserve all spaces/line breaks. No wrapping
`wspl`	white-space: pre-line	Collapse spaces, preserve line breaks. Auto wrapping
`wspw`	white-space: pre-wrap	Preserve all spaces/line breaks. Auto wrapping
`wsi`	white-space: initial	Reset to initial (normal)

Visual Comparison

Compares the same text (with spaces and line breaks) rendered with each white-space value.

Nowrap — wsn

Hello, this is a sample text with extra spaces.

Spaces collapsed, single line without wrapping

Pre — wsp

Hello, this is a sample text with extra spaces.

All spaces/line breaks preserved. No wrapping beyond container

Pre-line — wspl

Hello, this is a sample text with extra spaces.

Consecutive spaces collapsed, line breaks preserved. Auto wrapping

Pre-wrap — wspw

Hello, this is a sample text with extra spaces.

All spaces/line breaks preserved with auto wrapping

Initial (Normal) — wsi

Hello, this is a sample text with extra spaces.

Default. Spaces collapsed, auto wrapping when needed

Class Details

`wsn`white-space: nowrap

Prevents wrapping. Most used white-space class for single-line text: table headers, badges, button labels. Used with toe.

<!-- 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>

Common Combinations

`wsn oh toe`	Single-line truncation (most common pattern)
`wsn oh`	No wrapping + overflow hidden
`wsn df aic`	Align inline elements on single line

`wsp`white-space: pre

Preserves all spaces and line breaks. Same as <pre> tag, for code blocks or formatted text. No wrapping.

<!-- 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>

`wspl`white-space: pre-line

Collapses consecutive spaces but preserves line breaks. For maintaining user-entered line breaks while cleaning extra spaces.

<!-- 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>

`wspw`white-space: pre-wrap

Preserves all spaces/line breaks with auto wrapping at edges. Best for user-input content (comments, posts).

<!-- 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>

`wsi`white-space: initial

Resets white-space to initial (normal). For resetting inherited settings.

<!-- 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>

Behavior Comparison

Class	Consecutive Spaces	Line Break Characters	Auto Line Wrapping
`wsn`	합침	무시	안 함
`wsp`	보존	보존	안 함
`wspl`	합침	보존	함
`wspw`	보존	보존	함
`wsi`	합침	무시	함

Text Truncation Pattern

wsn oh toe is the most common single-line truncation pattern. All three required.

Truncation applied — wsn oh toe

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

Overflowing text shown as ...

No truncation (default)

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

Default is auto line wrapping

<!-- 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>

All three classes required

Without wsn, text wraps. Without oh, text overflows. Without toe, no ... shown.

Tips & Notes

wsn + oh + toe = text truncation combo

Most common single-line truncation. Cleanly handles overflow in card titles, table cells, list items.

wsp for code blocks

Use wsp to preserve code indentation/line breaks. Same effect without <pre>.

wspw optimal for user input

Use wspw to display user text as-is with natural edge wrapping.

word-break overflow text typography