Whitespace

Basic usage

Normal

Use whitespace-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

<div className="w-3/4 ...">
  <div className="**whitespace-normal** ...">
    Hey everyone! It's almost 2022 and we still don't know if there is aliens
    living among us, or do we? Maybe the person writing this is an alien. You
    will never know.
  </div>
</div>

No Wrap

Use whitespace-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

<div className="w-3/4 overflow-x-auto ...">
  <div className="**whitespace-nowrap** ...">
    Hey everyone! It's almost 2022 and we still don't know if there is aliens
    living among us, or do we? Maybe the person writing this is an alien. You
    will never know.
  </div>
</div>

Pre

Use whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.

<div className="w-3/4 overflow-x-auto ...">
  <div className="**whitespace-pre** ...">
    Hey everyone! It's almost 2022 and we still don't know if there is aliens
    living among us, or do we? Maybe the person writing this is an alien. You
    will never know.
  </div>
</div>

Pre Line

Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.

<div className="w-3/4 ...">
  <div className="**whitespace-pre-line** ...">
    Hey everyone! It's almost 2022 and we still don't know if there is aliens
    living among us, or do we? Maybe the person writing this is an alien. You
    will never know.
  </div>
</div>

Pre Wrap

Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.

<div className="w-3/4 ...">
  <div className="**whitespace-pre-wrap** ...">
    Hey everyone! It's almost 2022 and we still don't know if there is aliens
    living among us, or do we? Maybe the person writing this is an alien. You
    will never know.
  </div>
</div>