Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

White Space

Controls how white space is handled within an element.

Utility	Properties
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;`

Break Spaces

This example sets the white space to break-spaces. The text will respect spaces and line breaks, allowing for wrapping at spaces.

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

Normal

This example sets the white space to normal. The text will wrap normally, and multiple spaces will be collapsed into a single space.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="p-4 bg-white rad-1">
    <p class="tc-lead 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>

No Wrap

This example sets the white space to nowrap. 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-lead 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

This example sets the white space to 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-lead 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

This example sets the white space to 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-lead 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

This example sets the white space to 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-lead 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.

Media modifiers

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

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

Hover modifiers

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>