White Space

Controls how white space is handled within an element.

Class	Style
ws-bs	`white-space: break-spaces;`
ws-n	`white-space: normal;`
ws-nw	`white-space: nowrap;`
ws-p	`white-space: pre;`
ws-pl	`white-space: pre-line;`
ws-pw	`white-space: pre-wrap;`

Normal

Initial value

The text will wrap normally, and multiple spaces will be collapsed into a single space.

Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live. I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can meet up and hug each other again.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-slate fs-lg ws-n">Hi,    Anne.    It's    finally    springtime    here    on    Earth!    I    can't    stand    windy    or    cold    days,    so    I'm    very    excited    for    the    spring.    There    are    so    many    beautiful,    colorful    trees    where    I    live.    I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.    I've    been    a    little    under    the    weather    lately,    but    I'll    bounce    back    in    no    time    so    we    can    meet    up    and    hug    each    other    again.</p>
  </div>
</div>

Break Spaces

The text will respect spaces and line breaks, allowing for wrapping at spaces.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-slate fs-lg ws-bs">Hi,    Anne.    It's    finally    springtime    here    on    Earth!    I    can't    stand    windy    or    cold    days,    so    I'm    very    excited    for    the    spring.    There    are    so    many    beautiful,    colorful    trees    where    I    live.    I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.    I've    been    a    little    under    the    weather    lately,    but    I'll    bounce    back    in    no    time    so    we    can    meet    up    and    hug    each    other    again.</p>
  </div>
</div>

No Wrap

The text will not wrap to the next line, and it will overflow the container if it exceeds the width.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1 o-x-auto">
    <p class="tc-slate fs-lg ws-nw">Hi,    Anne.    It's    finally    springtime    here    on    Earth!    I    can't    stand    windy    or    cold    days,    so    I'm    very    excited    for    the    spring.    There    are    so    many    beautiful,    colorful    trees    where    I    live.    I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.    I've    been    a    little    under    the    weather    lately,    but    I'll    bounce    back    in    no    time    so    we    can    meet    up    and    hug    each    other    again.</p>
  </div>
</div>

Pre

The text will be displayed as is, preserving spaces and line breaks.

Hi, Anne. It's finally springtime here on Earth! It is a well-known pangram, I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live. I'll try to send you some pictures I took with the camera you gave me for my birthday.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-slate fs-lg ws-p">Hi,    Anne.    It's    finally    springtime    here    on    Earth!
It    is    a    well-known    pangram,
    I    can't    stand    windy    or    cold    days,
        so    I'm    very    excited    for    the    spring.
There    are    so    many    beautiful,    colorful    trees    where    I    live.
    I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.
  </div>
</div>

Pre-Line

The text will preserve line breaks but collapse multiple spaces into a single space.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-slate fs-lg ws-pl">Hi,    Anne.    It's    finally    springtime    here    on    Earth!
      I    can't    stand    windy    or    cold    days,    so    I'm    very
      excited    for    the    spring.    There    are    so    many    beautiful,    colorful    trees    where    I    live.
      I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.
      I've    been    a    little    under    the    weather    lately,    but    I'll    bounce    back    in    no    time    so    we    can    meet    up    and    hug    each    other    again.
    </p>
  </div>
</div>

Pre-Wrap

The text will preserve spaces and line breaks, and it will wrap when necessary.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-slate fs-lg ws-pw">Hi,    Anne.    It's    finally    springtime    here    on    Earth!    I    can't    stand    windy    or    cold    days,    so    I'm    very    excited    for    the    spring.    There    are    so    many    beautiful,    colorful    trees    where    I    live.    I'll    try    to    send    you    some    pictures    I    took    with    the    camera    you    gave    me    for    my    birthday.    I've    been    a    little    under    the    weather    lately,    but    I'll    bounce    back    in    no    time    so    we    can    meet    up    and    hug    each    other    again.</p>
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:ws-*,md:ws-*, lg:ws-*, and xxl:ws-* to allow targeting specific utilities in different viewports.

<div class="ws-n md:ws-pw ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:ws-* utility to override elements and change their values when hovering over them.

<div class="ws-n h:ws-pw ..."></div>